Components
Input
Displays a form input field or a component that looks like an input field, input groups, number input spinners, date input, date time input, time inputs, etc.
Loading
Installation
pnpm dlx shadcn@latest add @toui/input
Examples
Disabled
Loading
Readonly
Loading
Addon
Loading
Icon
Loading
File
Loading
Date
Loading
Time
Loading
Date & Time
Loading
Copy to clipboard
Loading
Clear button
Loading
Size
Loading
Form
Loading
Pattern
Tokens
10 CSS variables in 4 categories.
height
| CSS Variable | Value | Description |
|---|---|---|
--input-height-sm | var(--component-height-sm) | 2rem — shadcn h-8 |
--input-height-md | var(--component-height-md) | 2.25rem — shadcn h-9 default |
--input-height-lg | var(--component-height-lg) | 2.5rem — shadcn h-10 |
px
| CSS Variable | Value | Description |
|---|---|---|
--input-px-sm | var(--component-px-sm) | 0.75rem — px-3 |
--input-px-md | var(--component-px-md) | 1rem — px-4 |
--input-px-lg | var(--component-px-md) | 1rem — px-4 |
text
| CSS Variable | Value | Description |
|---|---|---|
--input-text-sm | var(--component-text-sm) | 0.75rem — text-xs |
--input-text-md | var(--component-text-md) | 0.875rem — shadcn text-sm |
--input-text-lg | var(--component-text-md) | 0.875rem — text-sm |
radius
| CSS Variable | Value | Description |
|---|---|---|
--input-radius | var(--component-radius-sm) | calc(var(--radius) - 2px) — shadcn rounded-md |
API Reference
This component extends the native HTML <input> element with additional styling and size variants.
Input
This component is a custom implementation that extends the native HTML <input> element with the following custom props:
| Prop | Type | Default |
|---|---|---|
variant | ||
className |
Credits
- Built with Radix UI Slot.
- Built with React Aria.