Skip to content
Signal

Components

Segmented control

Mutually exclusive choices. The current segment carries aria-pressed=true, aria-current or aria-selected=true.

Live example

Rendered with the real classes from /site/chitransit.css, light (left) and dark (right).

.ct-segmented [aria-pressed]
.ct-segmented--fill

Code

<div class="ct-segmented" role="group" aria-label="Theme"><button aria-pressed="true">System</button><button aria-pressed="false">Light</button><button aria-pressed="false">Dark</button></div>
<div class="ct-segmented ct-segmented--fill" style="--count:2" role="group" aria-label="Time display"><button aria-pressed="true">Minutes</button><button aria-pressed="false">Arrival time</button></div>

Tokens

From tokens/components.tokens.json. Override one instance by setting the property without the ct- prefix.

Custom propertyValueAlias
--ct-segmented-backgroundvar(--card-2){colors.card2}
--ct-segmented-background-selectedvar(--paper){colors.paper}
--ct-segmented-colorvar(--muted){colors.muted}
--ct-segmented-color-selectedvar(--ink){colors.ink}
--ct-segmented-font-sizevar(--fs-sub){type.sub}
--ct-segmented-font-weightvar(--weight-medium){weight.medium}
--ct-segmented-font-weight-selectedvar(--weight-semibold){weight.semibold}
--ct-segmented-gapvar(--space-2){space.s2}
--ct-segmented-height36px
--ct-segmented-paddingvar(--space-2){space.s2}
--ct-segmented-radiusvar(--r-control){radius.control}
--ct-segmented-segment-padding-xvar(--space-12){space.s12}
--ct-segmented-segment-radiusvar(--radius-segment){radius.segment}
--ct-segmented-shadow-selectedvar(--shadow-control){shadows.control}

Usage

Do

  • Use for two to four mutually exclusive choices, such as the theme switch.
  • Use --fill when the control spans its container.

Don't

  • Don't use for more than four options or for actions.

Accessibility

  • Wrap the buttons in role="group" with an aria-label.
  • The current segment carries aria-pressed="true" (or aria-current for navigation).