Form Inputs
All form controls — text input, textarea, select, checkbox, radio, toggle, date, and file upload. Labels are top-aligned. Errors appear on blur, not on keystroke. All controls implement ARIA labelling.
Text input
States
⚠ Email must include @ and a domain
Error
With prefix / suffix / icon
TZS
kg
Sizes — sm · md · lg
Textarea
States
Visible to your team only
Default
⚠ Provide at least 20 characters explaining the return
Error
Select / dropdown
States
⚠ Select a currency to proceed
Error
Checkbox
All states including indeterminate
Default / checked / indeterminate / disabled
Radio button
Radio group — one selection
Default / selected / disabled
Toggle / switch
On · Off · Disabled
Date picker
Date · Date-time inputs
⚠ Invoice date cannot be in the future
Error
File upload
Drop zone · File list
purchase-order-042.pdf
1.2 MB
delivery-receipt-scan.jpg
430 KB
State reference
| State | Trigger | Visual change | Markup |
|---|---|---|---|
| Default | — | 1px --border-medium border, white bg | <input> |
| Hover | Mouse over | Border darkens to 28% opacity | CSS :hover |
| Focus | Tab / click | Amber border + 3px amber focus ring | CSS :focus |
| Filled | User types | Text color switches to --text-primary | — |
| Error | Blur with invalid value | Coral border, error message below field | aria-invalid="true" |
| Disabled | disabled attr | 50% opacity, surface-2 bg, not-allowed cursor | disabled |