Input
Inputs collect user text data. They provide a consistent focus ring, placeholder styling, and disabled state across all form contexts. Always pair with a Label for accessibility. Use error styling for inline validation feedback.
Variants
DefaultStandard text input
With LabelPaired with Label
With ErrorValidation error state
DisabledNon-interactive state
States
Usage Guidelines
Do
Always pair inputs with a visible Label component. Screen readers and users both benefit.
Don't
Don't rely on placeholder text as a label. It disappears on focus and fails accessibility checks.
Do
Use error state for inline validation. Show the error message directly below the input.
Don't
Don't use error styling for informational messages. Red means something is wrong.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| type | string | "text" | HTML input type |
| className | string | — | Additional CSS classes |