Try a client, a year or a tool.
variant
outline | soft | ghost | underline
size
micro | tiny | small | medium | large
color
accent | blue | red | amber | black
shape
sharp | square | round
loading
boolean
disabled
boolean
showLabel
boolean
icon
ReactNode
prefix
string
suffix
string
clearable
boolean
helpText
string
error
string
<Input
label="Search projects"
showLabel
icon={<Search />}
clearable
helpText="Try a client, a year or a tool."
/>Anatomy
Every part an input can carry, all switched on at once. Real fields only use a few. You'd never put a currency symbol and an email domain in the same one.
Help text
| Part | Prop | Notes |
|---|---|---|
| Label | label | Always set. Hidden from sight unless showLabel is on, but still read out. |
| Icon | icon | A leading glyph, like the search glass. |
| Prefix | prefix | Fixed text before the value, like a currency symbol. |
| Value | value | What the person types. |
| Clear | clearable | Appears once there's a value. It's a real button, so it can be tabbed to. |
| Suffix | suffix | Fixed text after the value, like an email domain. |
| Help text | helpText | Linked with aria-describedby, so it's read after the label. |
| Error | error | Takes the help text's place, turns the border red and sets aria-invalid. |