Input
A single-line text input built on Base UI. Outline, subtle and ghost variants across four sizes.
Playground
<Input placeholder="Email address" />Preview
The default outline variant draws a soft shadow ring that lifts on hover and focus.
<Input placeholder="Email address" type="email" />Installation
npx shadcn@latest add https://espresso-base-ui.vercel.app/r/input.jsonUsage
import { Input } from "@/components/ui/input"<Input variant="subtle" size="sm" placeholder="Search..." />Variants
variant picks the resting surface: outline shows a shadow ring, subtle sits on a secondary background, and ghost is transparent until hovered or focused.
<Input variant="outline" placeholder="Outline" />
<Input variant="subtle" placeholder="Subtle" />
<Input variant="ghost" placeholder="Ghost" />Sizes
Four sizes from xs (24px) to lg (40px); text and radius scale with the height. The outline variant trims 2px to make room for its outer shadow ring.
<Input size="xs" placeholder="Extra Small (xs)" />
<Input size="sm" placeholder="Small (sm)" />
<Input size="md" placeholder="Medium (md)" />
<Input size="lg" placeholder="Large (lg)" />States
disabled mutes the text and blocks interaction, while data-valid, data-invalid and data-filled force the success, error and filled surfaces for static or externally validated states.
<Input disabled placeholder="Disabled" />
<Input data-valid="true" defaultValue="Valid" />
<Input data-invalid="true" defaultValue="Invalid" />
<Input data-filled="true" defaultValue="Filled" />Invalid via Field
Inside a Field with data-invalid="true", the input picks up the error surface automatically – pair it with FieldError for the message.
<Field data-invalid="true">
<Input defaultValue="hello@invalid" />
<FieldError>This field is required.</FieldError>
</Field>API reference
Input accepts every standard input prop (type, placeholder, disabled, defaultValue, …) except the native size attribute, which is replaced by the size variant below.
Input
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "outline" | "subtle" | "ghost" | "outline" | Visual style – shadow ring (outline), filled secondary surface (subtle), or transparent until interaction (ghost). |
| size | "xs" | "sm" | "md" | "lg" | "md" | Control height (24 / 28 / 32 / 40px) with matching text size and radius. |
| data-invalid | string | – | Set to "true" to force the error surface (also inherited from a Field with data-invalid). |
| data-disabled | string | – | Set to "true" to apply the disabled styling without the native disabled attribute. |
Accessibility & styling hooks
Associate a visible label via htmlFor/id (or the Field component's FieldLabel), and set aria-invalid alongside data-invalid when reporting validation errors so assistive tech hears the state too. The element exposes data-slot="input", data-variant and data-size, and responds to data-filled, data-valid and data-invalid state attributes – including autofill styling via :-webkit-autofill.
The inputVariants cva helper is exported for building custom controls with the same surfaces:
import { inputVariants } from "@/components/ui/input"
<input className={cn(inputVariants({ variant: "subtle", size: "sm" }))} />