Text input component with consistent styling.
| Name | Type | Default | Description |
|---|---|---|---|
| type | string | text | Input type. tel filters to phone chars only (0-9, +, -, (, ), space) and applies smart defaults. Use PasswordInput for password fields and DateInput for date fields. |
| size | "default" | "sm" | "lg" | default | Size variant |
| placeholder | string | — | Placeholder text |
| disabled | boolean | — | Disable input |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Background | color.input-background | var(--input-background) | White in light mode, elevated surface in dark mode | |
| Border | color.input | var(--input) | Input border color | |
| Disabled Background | color.muted | var(--muted) | Muted background when disabled | |
| Disabled Text | color.muted-foreground | var(--muted-foreground) | Muted text when disabled | |
| Disabled Border | color.muted | var(--muted) | Muted border when disabled | |
| Text | color.foreground | var(--foreground) | Input text color | |
| Placeholder | color.muted-foreground | var(--muted-foreground) | Placeholder text | |
| Focus Ring | color.ring | var(--ring) | Focus indicator | |
| Border Radius | borderRadius.md | var(--radius) | Medium corner rounding | |
| Padding X | spacing.3 | 0.75rem | Horizontal padding | |
| Padding Y | spacing.2 | 0.5rem | Vertical padding | |
| Height (sm) | spacing.9 | 2.25rem | Small input height | |
| Height (default) | spacing.10 | 2.5rem | Default input height | |
| Height (lg) | spacing.11 | 2.75rem | Large input height | |
| Font Size (sm) | fontSize.xs | 0.75rem | Extra small text for sm size | |
| Font Size (default) | fontSize.sm | 0.875rem | Small text for default size | |
| Font Size (lg) | fontSize.base | 1rem | Base text for lg size |
Available size variants for different contexts.
<Input size="sm" placeholder="Small input" /> <Input placeholder="Default input" /> <Input size="lg" placeholder="Large input" />
Different input types for various data formats. Phone (tel) filters to phone characters only (0-9, +, -, (, ), space).
<Input type="text" placeholder="Text input" /> <Input type="email" placeholder="email@example.com" /> <PasswordInput placeholder="••••••••" /> <Input type="number" placeholder="0" /> <Input type="tel" placeholder="+1 (555) 000-0000" /> <Input type="url" placeholder="https://example.com" /> <DateInput />
Different interactive states.
<Input defaultValue="With default value" /> <Input placeholder="Disabled input" disabled /> <Input defaultValue="Read-only value" readOnly />