Browse components
Input
Text input with icon slots, three sizes, a focus line that sweeps out from the center and an error state that shakes and slides in its message.
Installation
npx shadcn@latest add @glint-ui/inputFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/input.json
Usage
import { Input } from "@/components/ui/input";
<Input placeholder="Email" startIcon={<AtSign />} error={invalid && "Enter a valid email"} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| placeholder | string | "Search components..." | Placeholder text. All native input props are forwarded. |
| size | "sm" | "md" | "lg" | "md" | Height, padding and text size. |
| error | string | "" | Error message (or true) marks the field invalid and links the message via aria-describedby. |
| disabled | boolean | false | Disable the input. |
| startIcon | ReactNode | — | Icon before the value. |
| endIcon | ReactNode | — | Icon, text or small button after the value. |
| className | string | — | Extra classes for the root element. |