Forms
Input
The single-line text field: a soft filled pill with a ring on focus and a red ring when invalid.
packages/design-system/components/ui/input.tsx
Examples
Anatomy
- 01Filled pill, bg-input/50
- 02Placeholder, muted
- 03Focus ring, ring/30
Usage
import { Input } from "@repo/design-system/components/ui/input";
<Input type="email" id="email" placeholder="you@company.com" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | HTMLInputTypeAttribute | none | Any native type. File inputs get a flat button. |
| aria-invalid | boolean | none | Turns the border and ring destructive. |
| ...props | ComponentProps<"input"> | none | Any input attribute; it renders Base UI's Input. |
| className | string | none | Merged last with cn(). Use it for layout (width, margin), not to restyle the component. |
Guidance
Do
- Pair it with a FieldLabel, or give it an aria-label.
- Use the right type so phones show the right keyboard.
Don't
- Use placeholder text as the label.