SegmentControl

Tabbed navigation component for switching between sections. Supports 2 or more segments with automatic dividers for 3+ segments.

When to use

check_circleWhen to use

  • For switching between views or content sections
  • When options are mutually exclusive
  • For filtering content by category
  • In settings or configuration panels

cancelWhen not to use

  • For primary navigation (use NavItem instead)
  • When there are more than 5-6 options
  • For actions (use Button instead)
  • When selections can be multiple

2 Segments

Default

3+ Segments (with dividers)

Default

Interactive

Click to switch

This example is fully interactive

Currently selected: tab1

Usage

tsx
import { SegmentControl } from '@/components/SegmentControl';

// Uncontrolled
<SegmentControl
  segments={[
    { id: 'tab1', label: 'First' },
    { id: 'tab2', label: 'Second' },
    { id: 'tab3', label: 'Third' },
  ]}
  defaultValue="tab1"
/>

// Controlled
const [selected, setSelected] = useState('tab1');
<SegmentControl
  segments={[...]}
  value={selected}
  onChange={setSelected}
/>

Props

PropTypeDefaultDescription
segments*Segment[]—Array of segment items with id and label
defaultValuestring—Initially selected segment id
valuestring—Controlled selected segment id
onChange(id: string) => void—Callback when selection changes

Accessibility

  • Uses role="tablist" and role="tab"
  • Selected tab has aria-selected="true"
  • Supports arrow key navigation between tabs
  • Tab panels should have matching aria-labelledby