Components · Inputs
Switch
Two named, mutually exclusive alternatives shown side by side, with the current one filled in brand blue. Most often used above a table to change what the table shows.
Figma source: Switch ↗Examples
<div class="cds-switch" role="group" aria-label="View">
<button type="button" class="cds-switch__option" aria-pressed="true">My projects</button>
<button type="button" class="cds-switch__option" aria-pressed="false">All projects</button>
</div>Figma properties
| Property | Values | Notes |
|---|---|---|
Selected | Left · Right | Which option is active. |
State | Default · Focus · Disabled | Runtime state. |
Left Text / Right Text | text | The two option labels. |
Original Figma description & what changed
From Figma: The switch is to be used for the selection of two binary choices. The selected and current option will be highlight in Cayuse Blue, while the unselected, but selectable and other option, will be in White. The use can switch between each option as an action onto (contextually) where the Switch is placed. The most common usages of the Switch are on tables as an action on the data in the tables.
What changed: Same behaviour, less than half the words. Removed the restatement of the visual styling — which the tokens now define and which will drift the moment they change — and kept the two things a reader actually needs: that it is a choice between two named alternatives, and that its common home is above a table. Added the boundary against Toggle, which the original does not draw and which is the mistake people make.
Usage
When to use it
- Use to switch between two views of the same data — mine/all, active/archived.
- Keep both labels short; they sit side by side and the control should not dominate the toolbar.
- Apply the change immediately.
- Make the two options genuine alternatives — both should be equally valid to land on.
Accessibility
- Two buttons in a labelled
role="group", each carryingaria-pressed. The group label states what is being switched. - Both options stay in the tab order — unlike a radio group, this is two buttons, and the user needs to reach either.
- Do not use
role="switch"here: that role has an on/off semantic, and this control has two equal named values. - When the switch changes what a table shows, announce the change politely — a silent content swap below the fold is easy to miss.
Tokens consumed
| Token | Applied to | Resolves to |
|---|---|---|
--switch-selected-background | Selected option fill | --primary-brand-color |
--switch-selected-text | Selected option label | --color-white |
--switch-unselected-background | Unselected fill | --color-white |
--switch-unselected-text | Unselected label | --color-gray-500 |