Segmented Control

A single-select switch on a tertiary track with a sliding white thumb - the Weekly / Monthly / Yearly switcher from the chart cards. Built on React Aria ToggleButtonGroup: arrow keys move, Space selects.

Installation

You can add this segmented control using our CLI or manually:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

CLI

Manual

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add segmented-control

Controlled selection

Selection uses React Aria's key-set API: pass selectedKeys + onSelectionChange to control it, or defaultSelectedKeys for uncontrolled. Guard against empty sets to keep one segment always active.

const [period, setPeriod] = useState(new Set(["weekly"]));
<SegmentedControl  selectedKeys={period}  onSelectionChange={(keys) => keys.size > 0 && setPeriod(new Set(keys))}  aria-label="Period">  <SegmentedControlItem id="weekly">Weekly</SegmentedControlItem>  <SegmentedControlItem id="monthly">Monthly</SegmentedControlItem></SegmentedControl>