FORMS

SegmentedControl

Single-select toggle group with a Memphis border seam between items. Built on Radix ToggleGroup with type="single". Use it for 2-5 mutually exclusive options where keeping the choices visible adds clarity.

Import

import { SegmentedControl, SegmentedControlItem } from 'damo-ui'

Horizontal (default)

1<SegmentedControl defaultValue="day" aria-label="Range">
2  <SegmentedControlItem value="day">Day</SegmentedControlItem>
3  <SegmentedControlItem value="week">Week</SegmentedControlItem>
4  <SegmentedControlItem value="month">Month</SegmentedControlItem>
5</SegmentedControl>

Vertical

1<SegmentedControl orientation="vertical" defaultValue="all">
2  <SegmentedControlItem value="all">All</SegmentedControlItem>
3  <SegmentedControlItem value="open">Open</SegmentedControlItem>
4  <SegmentedControlItem value="closed">Closed</SegmentedControlItem>
5</SegmentedControl>

Props

SegmentedControl props
PropTypeDefaultDescription
valuestring—Controlled selected value. Pair with onValueChange.
defaultValuestring—Uncontrolled initial selected value.
onValueChange(value: string) => void—Fires whenever the selection changes.
orientation'horizontal' | 'vertical''horizontal'Layout axis.
aria-labelstring—Required when there is no surrounding visible label.
disabledboolean—Disables every item in the group.

Accessibility

  • The root renders role="group" with each item as role="radio" + aria-checked (Radix ToggleGroup type="single" uses the radio pattern under the hood).
  • aria-label (or aria-labelledby) on the root is required: without it the group has no accessible name, and screen readers will announce the items without context.
  • Keyboard: Tab moves focus into the currently selected item (roving tabindex); arrow keys cycle items and move the selection; Tab again moves focus out of the entire group.

SegmentedControl vs RadioGroup

  • Reach for SegmentedControl when 2-5 options fit on one line and the control acts more like a tab strip than a form input.
  • Reach for RadioGroup when you have many options or want each option on its own line with descriptions.
← SliderSelect →