XDS — Design System

XDSSegmentedControlItem@xds/core · SegmentedControl

Usage

A segmented button group that allows users to make a single selection from a small set of mutually exclusive options. Use SegmentedControl when all options should be visible at once and the selection controls a value or mode, not page navigation.

Best practices

Guidance	Practices
Do	Use for switching between 2–5 mutually exclusive views or modes where all options should be visible.
Do	Provide a descriptive label for the control to ensure the group is accessible to screen readers.
Don't	Use for page-level navigation — use XDSTabList instead. TabList is a navigation component, while SegmentedControl is an input that always has exactly one selected option.
Don't	Use for simple on/off states — use XDSToggleButton instead. ToggleButton can be toggled on or off independently, while SegmentedControl enforces a single selection from a group.

Import

ts
import {XDSSegmentedControlItem} from '@xds/core/SegmentedControl'

Props

Prop	Type	Description
valuerequired	string	Unique value for this segment, matched against the parent value.
labelrequired	string	Accessible label for this segment. Rendered as visible text unless isLabelHidden is true.
isLabelHidden	boolean (default: false)	Whether the label is visually hidden. When true, only the icon is displayed and label is used as aria-label.
icon	ReactNode	Icon element displayed before the label.
isDisabled	boolean (default: false)	Whether this individual item is disabled.

Showcase source

tsx
'use client';
import {useState} from 'react';
import {
  XDSSegmentedControl,
  XDSSegmentedControlItem,
} from '@xds/core/SegmentedControl';
import {XDSCenter} from '@xds/core/Center';
import {XDSIcon} from '@xds/core/Icon';
export default function SegmentedControlItemShowcase() {
  const [view, setView] = useState('board');
  return (
    <XDSCenter>
      <XDSSegmentedControl value={view} onChange={setView} label="View mode">
        <XDSSegmentedControlItem
          value="board"
          label="Board"
          icon={<XDSIcon icon="viewColumns" />}
        />
        <XDSSegmentedControlItem
          value="list"
          label="List"
          icon={<XDSIcon icon="menu" />}
        />
        <XDSSegmentedControlItem
          value="timeline"
          label="Timeline"
          icon={<XDSIcon icon="calendar" />}
        />
        <XDSSegmentedControlItem
          value="chart"
          label="Chart"
          icon={<XDSIcon icon="arrowsUpDown" />}
          isDisabled
        />
      </XDSSegmentedControl>
    </XDSCenter>
  );
}