Forms & Controls
Checkbox, Toggle, Search and Radio — the selection controls, all interactive. Built mobile-first: each demo is a constrained, full-width column. Active fills use the --Checkbox/*, --toggle/* and --icon/active tokens, re-theming blue → lime in dark.
Checkbox try it
20px box, 4px radius. Five states — tap the Default one to toggle.
Default
Focus
Selected
Indeterminate
Disabled
Checkbox with label
Label right (default) or left; the whole row is the hit target.
right
left
disabled
Toggle try it
44×24 pill. States On & Off — tap the Default pair. On track re-themes to lime in dark.
OnOff
Default
Hover
Focus
Disabled
Toggle with label
Label right (default) or left; the whole row toggles.
right
left
Search field
Full-width search input. Focus it to type; states use the --input-field/* tokens.
Default
Filled
×
Focus
Error
No results found
Radio buttons
20px, 2px border. Default, Active, Disabled.
Default
Active
Focus
Disabled
Radio group try it
Single-select — tap an option to move the selection.
Token Reference
| Token | Value | Usage |
|---|---|---|
| --Checkbox/active/bg-box-active | #352eff → lime | Selected / indeterminate fill |
| --toggle/active/bg-box-active | #352eff → lime | Toggle On track |
| --icon/active | #352eff → lime | Radio ring + dot |
| --input-field/focus/outline-box | #352eff → lime | Search focus border |
| --input-field/error/outline-box | #ff0000 | Search error border + message |
| --Checkbox/default/outline-box | #cccccc | Rest border · disabled fills |