Forms
Everything a user types, picks, or toggles. Purple drives focus, red signals errors.
Text field
A single-line input for short text. Use it to collect values like a name or email.
States
Textarea
A multi-line input that grows vertically. Use it for longer text like messages and notes.
Select
A control for choosing one option from a list. Use it when there is one answer but too many choices for radios.
Search field
A text input with a leading icon and a clear button. Use it to search or filter content.
Checkbox
A box that toggles on or off. Use it when several options can be selected at once.
Radio
A control for picking one option in a group. Use it when the choices are few and mutually exclusive.
Toggle
An on or off switch. Use it for a single setting that takes effect immediately.
Slider
A handle that moves along a range. Use it to set an approximate value like volume or price.
Stepper
A marker of progress through a sequence. Use it to show where someone is in a multi-step flow.
File upload
A dropzone with an upload progress row. Use it to attach files and show their upload state.