Component · <input>

TextField

Label, hint and error wired together for screen readers.

We never share it.

Username

Must be at least 3 characters.

Install

npx @lazizbekio/mitame add text-field

Usage

import { SearchIcon } from "@/components/mitame/icons/search";
import { TextField } from "@/components/mitame/ui/text-field";

export default function TextFieldDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <TextField label="Search" placeholder="Find anything" icon={<SearchIcon />} />
      <TextField label="Email" type="email" placeholder="you@example.com" description="We never share it." />
      <TextField label="Username" defaultValue="me" error="Must be at least 3 characters." />
    </div>
  );
}

Props

Prop	Type	Default	Description
`label`	`ReactNode`	—	Visible label, linked with htmlFor.
`description`	`ReactNode`	—	Hint under the field, linked with aria-describedby.
`error`	`ReactNode`	—	Error message. Also sets aria-invalid.
`icon`	`ReactNode`	—	Leading icon, e.g. <SearchIcon />.
`...props`	`InputHTMLAttributes`	—	Anything an <input> takes.

Notes

On touch screens the text is 16px so iOS Safari does not zoom in on focus.

Styling

Every part has a data-slot starting with field, and state lives in data-state,data-variant and friends. Pass any class to override; theme styles sit in a lower CSS layer, so yours win. See Theming.