Input
Single-line text field with optional label, hint, error state, icon slots, and text addons. Accepts all native input attributes.
Examples
We'll never share your email.
With icons
With addons
https://
.com
https:///path
Error state
Please enter a valid email address.
Sizes
Disabled
Clearable
Character count
0
Keep it concise.
18 / 100
Props
label
string
Visible label rendered above the input.
hint
string
Helper or error text rendered below the input.
size= 'md'
'sm' | 'md' | 'lg' | 'xl'
Controls height and padding.
error= false
boolean
Applies error styles and colours the hint text red.
leftIcon
ReactNode
Icon rendered inside the left edge of the input.
rightIcon
ReactNode
Icon rendered inside the right edge of the input.
prefix
ReactNode
Text or element attached to the left outside edge (e.g. "https://").
suffix
ReactNode
Text or element attached to the right outside edge (e.g. ".com").
clearable= false
boolean
Shows a clear (×) button inside the right edge when the input has a value.
showCount= false
boolean
Displays a character count below the input. Shows "n / max" when maxLength is set.
disabled
boolean
Disables the input.
placeholder
string
Placeholder text shown when empty.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Visible label rendered above the input. |
| hint | string | — | Helper or error text rendered below the input. |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Controls height and padding. |
| error | boolean | false | Applies error styles and colours the hint text red. |
| leftIcon | ReactNode | — | Icon rendered inside the left edge of the input. |
| rightIcon | ReactNode | — | Icon rendered inside the right edge of the input. |
| prefix | ReactNode | — | Text or element attached to the left outside edge (e.g. "https://"). |
| suffix | ReactNode | — | Text or element attached to the right outside edge (e.g. ".com"). |
| clearable | boolean | false | Shows a clear (×) button inside the right edge when the input has a value. |
| showCount | boolean | false | Displays a character count below the input. Shows "n / max" when maxLength is set. |
| disabled | boolean | — | Disables the input. |
| placeholder | string | — | Placeholder text shown when empty. |