Controls & tabs
Checkboxes, radio buttons, switches, and counters handle binary and numeric input. Tabs organize content into parallel sections without requiring navigation.
Checkbox
Use checkboxes when one or more options can be selected from a set. Always label every checkbox; never use checkboxes for mutually-exclusive options (use radio instead).
| Token | Value | Usage |
|---|---|---|
--color-bg-brand | WS Green 01 #319B42 | Checked fill |
--color-border-focus | WS Green 01 #319B42 | Focus ring |
--color-border-default | gray-300 | Unchecked border |
Radio button
Use radio buttons when exactly one option must be selected from a set of two or more. Always group radio inputs inside a <fieldset> with a visible <legend>.
Switch
Switches commit immediately on toggle — use them only for settings or feature flags that take effect without a save action. For form selections that need confirmation, use a checkbox.
Counter
Counters (steppers) let users increment or decrement a numeric value within a defined range. Always enforce min/max constraints and announce the updated value to assistive technology via aria-live.
Default tab style
The standard tab style uses a green underline indicator for the active tab. Available in three sizes — Standard, Large, and X-Large. Tabs can carry a numeric badge counter to show item counts.
Standard size
Large size
X-Large size
Alternate tab style
The alternate style uses a dark navy container (ws-dark-01) with the green active indicator hanging at the bottom edge. Use on dark-surface contexts like detail drawer headers or dashboard page headers. Supports up to 7 tabs before overflow.
Usage guidance
- Pair each control with a visible, descriptive label.
- Use switches for instant-commit toggles; use checkboxes for form selections.
- Use radio buttons when choices are mutually exclusive.
- Keep tab labels short — 1–3 words.
- Don't use a switch when the action needs a save button.
- Don't exceed 7 tabs in a single tab bar.
- Don't mix Default and Alternate tab styles on the same surface.
- Don't rely on color alone to convey a control's state.
Design tokens
| Token | Value | Usage |
|---|---|---|
--color-bg-brand | #319B42 | Checkbox/radio/switch active fill; active tab underline |
--color-border-focus | #319B42 | Focus ring on controls |
--color-border-default | gray-300 | Unchecked/unselected control border |
--color-bg-subtle | gray-50 | Counter button background; tab panel background |
--ws-dark-01 | #1F2A44 | Alternate tab bar container |
--radius-md | 8px | Counter and chip corner radius |