Input
Text inputs with labels, validation states, helper text, and icon support.
Basic
A simple input with a label and placeholder.
Sizes
Inputs come in sm, md, and lg sizes.
Validation
Inputs with error messages and helper text.
Password must be at least 8 characters.
Must be 3-20 characters, no spaces.
With Icons
Inputs can include a leading icon for context.
Interactive
A controlled input with live value display and toggles for error and disabled states.
Current value: (empty)
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label text displayed above the input. |
placeholder | string | — | Placeholder text shown when the input is empty. |
error | string | — | Error message. When set, the input is styled as invalid. |
helperText | string | — | Hint text displayed below the input. |
inputSize | "sm" | "md" | "lg" | "md" | Controls the height and font size of the input. |
iconLeft | ReactNode | — | Icon rendered inside the input on the left. |
disabled | boolean | false | Prevents interaction when true. |
fullWidth | boolean | false | Stretches the input to fill its container. |
Related Components
Best Practices
✅ Do
- Always include a visible label
- Show validation feedback inline
- Use placeholder text as hints not labels
- Use the correct input type (email, password, etc.)
❌ Don't
- Use placeholder as the only label
- Show errors before user interaction
- Auto-clear fields on validation error
- Make required fields unmarked
Accessibility
| Feature | Support |
|---|---|
| Label association | Via htmlFor/id pairing |
| aria-required | Marks required fields for assistive technologies |
| aria-invalid + aria-describedby | Links error messages to the input for screen readers |
| autocomplete attribute | Supports browser autofill for common fields |