Input
shadcn/ui
Single-line text field. Use for search, forms, and inline editing.
@/components/ui/inputSizes
| Size | Height | Preview | Usage |
|---|---|---|---|
| default | 36px | Forms, dialogs, filters | |
| md | 32px | Detail panels, inline-edit rows, medium forms | |
| sm | 28px | Toolbars, search bars, compact forms | |
| xs | 24px | Table inline edit, dense cell input |
States
| State | Preview | Note |
|---|---|---|
| Default | bg-background, border-input | |
| Hover | no visual change — cursor signals interactivity | |
| Focus | border-ring, ring-ring/50 | |
| With value | Controlled or uncontrolled | |
| Disabled | opacity-50, cursor-not-allowed | |
| Subtle | bg-muted for inputs inside panels/toolbars | |
| Error | border-destructive on validation error |
With icons
absolute + left-2.5, pointer-events-none on icon
With label + error
Enter a valid email address
In context — toolbar
Table
Toolbar search uses bg-muted border-transparent — blends into the toolbar background
Props
| Prop | Type | Description |
|---|---|---|
| placeholder | string | Hint text when input is empty |
| disabled | boolean | Prevents interaction, reduces opacity |
| type | string | HTML input type: text, email, password, number, search… |
| value | string | Controlled value |
| onChange | function | Change handler for controlled inputs |
| className | string | Additional Tailwind classes |
On this page