Input
A single-line text control with three sizes and optional inline prefix and suffix content.
Compose Input with Field for labels, descriptions, validation, and error messaging. Use Textarea when the value can contain line breaks.
Labeled input
Installation
$npx shadcn@latest add @patchui/input
The copied source is available in the registry JSON. The canonical implementation lives in packages/react/src/components/input.tsx.
Usage
<Field>
<FieldLabel>Email</FieldLabel>
<Input id="email" type="email" />
</Field>For search, compose Input with a search icon in prefix and an optional clear action in suffix.
Examples
Prefix and suffix
Use affixes for supplemental context that is not part of the editable value.
https://.com
Prefix and suffix
Sizes and states
Size controls density. Loading and disabled states preserve the field’s label and value context.
Loading
Sizes and states
API reference
Input accepts native input attributes. These props add Patch UI behavior.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Uses the shared 24, 32, or 40 pixel control heights. |
| variant | "default" | "unstyled" | "default" | Removes control chrome when another component owns the surface. |
| prefix / suffix | ReactNode / ReactNode | - | Adds muted inline content before or after the editable value. |
| loading | boolean | false | Disables the input and replaces the suffix with a spinner. |
Accessibility
- Associate every Input with a visible label. A placeholder is not a label.
- Connect descriptions and errors through Field or
aria-describedby. - Use prefixes and suffixes for supplemental information, not required instructions.
Related: Field