Skip to content
quartiledocsv0.1
GitHub

SegmentedControl

Preview

One choice from a short list on a sunken track, for periods, views and modes.

Example

<SegmentedControl
  aria-label="Period"
  mono
  options={['7D', '30D', '90D', '12M']}
  value={period}
  onChange={setPeriod}
/>

<SegmentedControl
  aria-label="View"
  size="sm"
  options={[
    { value: 'chart', label: 'Chart', icon: <IconBarChart /> },
    { value: 'table', label: 'Table', icon: <IconTable /> },
  ]}
  defaultValue="chart"
/>

Usage

Strings are used as both value and label. mono suits period codes, and fullWidth stretches equal segments across the container. Every playground on these pages uses it.

Props

SegmentedControl

PropTypeDefaultDescription
optionsrequired(string | SegmentedOption)[]—Strings are used as both value and label.
valuestring——
defaultValuestring——
onChange(value: string) => void——
size'sm' | 'md''md'sm 24 · md 28 px segments.
monobooleanfalseMono labels, for periods such as 7D · 30D · 90D.
fullWidthbooleanfalseStretch to the container width with equal segments.
disabledbooleanfalse—
classNamestring——
styleCSSProperties——
aria-labelstring—Required unless aria-labelledby is given: names the radio group.
aria-labelledbystring——

SegmentedOption

PropTypeDefaultDescription
valuerequiredstring——
labelrequiredReactNode——
iconReactNode——
disabledboolean——
aria-labelstring—Accessible name when label is not text (icon-only segments).

Accessibility

  • A radio group: arrow keys move and select, Home and End jump to the ends.
  • Name it with aria-label or aria-labelledby; give icon-only segments an aria-label.
Report an issueBuilt Oct 21, 2026