Segmented Control

Single-select toggle group with a sliding indicator (Motion layout animation).

Import

import { SegmentedControl, Segment } from '@marbleui/ui'

Props

<SegmentedControl>

Prop	Type	Default	Description
children *required	`ReactNode`	`—`	The children of the component. A function may be provided to alter the children based on component state.
defaultValue	`Key`	`—`
onChange	`(value: Key) => void`	`—`
value	`Key`	`—`
variant	`'underline' \| 'pill'`	`'pill'`

Also accepts React Aria props (81).

<Segment>

Prop	Type	Default	Description
id *required	`Key`	`—`

Also accepts React Aria props (104).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria ToggleButton · React Aria ToggleButtonGroup. Follow the primitive's docs for the full keyboard map.

Usage notes

Compact single-choice switcher with a sliding indicator, for views or ranges (Day, Week, Month). To switch between content panels use Tabs; for a form choice with descriptions use RadioGroup; for multi-select use ToggleButtonGroup.

<SegmentedControl aria-label="Range" defaultValue="week" onChange={setRange}>
  <Segment id="day">Day</Segment>
  <Segment id="week">Week</Segment>
</SegmentedControl>

Uncontrolled: defaultValue. Controlled: value + onChange; both use the Segment id.
One segment is always selected: deselecting is not allowed.
variant is pill (default) or underline. Pass aria-label, since there is no visible label.
Icon-only Segments need their own aria-label.

Example source · show

import { Segment, SegmentedControl } from './segmented-control'

export const styles = {
  Pill: () => (
    <SegmentedControl aria-label="Range" defaultValue="week">
      <Segment id="day">Day</Segment>
      <Segment id="week">Week</Segment>
      <Segment id="month">Month</Segment>
      <Segment id="year">Year</Segment>
    </SegmentedControl>
  ),
  Underline: () => (
    <SegmentedControl aria-label="View" variant="underline" defaultValue="board">
      <Segment id="board">Board</Segment>
      <Segment id="list">List</Segment>
      <Segment id="timeline">Timeline</Segment>
    </SegmentedControl>
  ),
}

Source: packages/ui/src/segmented-control/segmented-control.tsx

Catalog

Category: selection
Priority: Foundation
Primitive: react-aria
React Aria: ToggleButtonGroup
Base UI: Toggle Group