Checkbox / Radio / Toggle
Four selection control types that share the same checked/active state color and include a disabled state.
CSS variables
| Variable | Theme field | Used for |
|---|---|---|
--color-primary | global_colors.primary_color | Checked and active state — background fill and border color of the control |
Radio
Standard circular radio button. Only one option in a group can be active at a time. Use for mutually exclusive choices where the user must pick exactly one.
Round checkbox
A checkbox rendered with a large border-radius, giving it a circular appearance. Rendered in a checked state by default. Use for single-item selection in lists or forms where a softer visual style fits better than a square checkbox.
Toggle
A binary on/off switch using the Bootstrap form-switch class. Use for settings and preferences where the result takes effect immediately without requiring a form submission — for example, enabling a feature flag or toggling email notifications on/off.
Checkbox
Standard square checkbox. Use for multi-select scenarios where the user can choose any number of options — for example, selecting which columns to display, or agreeing to terms and conditions.