TextField
TextField Component
Playground
Props
| Prop | Type | Default | Value |
|---|---|---|---|
label | string | — | |
helperText | string | — | |
error | string | — | |
leftIcon | ReactNode | — | — |
rightIcon | ReactNode | — | — |
size | 'sm' | 'md' | 'lg' | — | |
fullWidth | boolean | — | |
disabled | boolean | — | |
showPasswordToggle | boolean | — | |
showNumberStepper | boolean | — | |
onClear | () => void | — | — |
clearable | boolean | — |
Usage
// Basic usage
<TextField label="Email" placeholder="Enter your email" />
// With error
<TextField label="Email" error="Invalid email format" />
// With sizes
<TextField size="sm" placeholder="Small" />
<TextField size="md" placeholder="Medium (default)" />
<TextField size="lg" placeholder="Large" />
// Password with toggle
<TextField type="password" label="Password" />
// Clearable input
<TextField clearable onClear={() => setValue('')} value={value} />