Input
Text input and textarea component with label, error/hint messages, icons, and size presets.
Playground
label
placeholder
size
disabled
Error msg
Hint text
rounded
<Input
label="Email"
placeholder="you@example.com"
/>Basic
Simple input with placeholder.
With Label
Add a label and required indicator.
Error and Hint
error replaces hint when both are provided.
Username is already taken
At least 8 characters
With Icons
leftIcon and rightIcon for prefix/suffix icons.
Sizes
Textarea
Set multiline to render a textarea.
Disabled
API
| Property | Type | Default | Description |
|---|---|---|---|
label | string | Label rendered above the input | |
required | boolean | false | Add a * indicator next to the label |
error | string | Error message shown below the input (replaces hint) | |
hint | string | Helper text shown below the input | |
size | "sm" | "md" | "lg" | "md" | Size preset |
leftIcon | ReactNode | Icon or element in the left slot | |
rightIcon | ReactNode | Icon or element in the right slot | |
multiline | true | Render a <textarea> instead of <input> | |
rows | number | Number of visible rows (textarea only) | |
disabled | boolean | false | Disable the field |
wrapperClassName | string | Extra class on the inner wrapper div |