Input

1. 1
   Install the following dependencies

   npmpnpmyarn

   npm install react-aria-components
2. 2
   Create ainput.tsxfile and paste the following into it.

   input.tsx

   // components/base/input/input.tsx"use client"; import type { ReactNode, Ref } from "react";import { TextField as AriaTextField, Group as AriaGroup, Input as AriaInput,} from "react-aria-components";import { Label } from "./label";import { HintText } from "./hint-text"; export interface InputProps { label?: ReactNode; hint?: ReactNode; placeholder?: string; isRequired?: boolean; isInvalid?: boolean; ref?: Ref<HTMLInputElement>;} export function Input({ label, hint, placeholder, ...props }: InputProps) { return ( <AriaTextField {...props} className="group flex w-full flex-col gap-1"> {({ isRequired, isInvalid }) => ( <> {label && <Label isRequired={isRequired}>{label}</Label>} <AriaGroup className="flex w-full items-center gap-2 rounded-2lg bg-background-tertiary-default p-2 ring-2 ring-inset ring-transparent transition focus-within:ring-border-button-active"> <AriaInput placeholder={placeholder} className="min-w-0 flex-1 bg-transparent p-0 pl-1 outline-none placeholder:text-text-tertiary" /> </AriaGroup> {hint && <HintText isInvalid={isInvalid}>{hint}</HintText>} </> )} </AriaTextField> );}
3. 3
   Update the import paths to match your project setup.

Sizes

States

Phone number