Segmented Control

Segmented control allows users to select one option from a set of related choices. It features a sliding indicator animation and supports icons.

Segmented Control Playground

Preview

Code

List

Grid

Table

Compact

Controls

Type:

Primary

Neutral

Size:

Small

Medium

Large

Style:

Icon + Text

Icon Only

Text Only

Width:

Equal

Content

Dividers:

Off

Installation

You can add the segmented control component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install @react-aria/focus

Copy and paste the following code into your project.

SegmentedControl.tsx

Segment.tsx

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

import { SegmentedControl } from '@versaui/ui/components/SegmentedControl';
import { List, GridFour, SquaresFour } from '@phosphor-icons/react';
const [view, setView] = useState('list');
// Basic segmented control
<SegmentedControl
  items={[
    { id: 'day', label: 'Day' },
    { id: 'week', label: 'Week' },
    { id: 'month', label: 'Month' },
  ]}
  selectedId={view}
  onChange={setView}
/>
// With icons
<SegmentedControl
  items={[
    { id: 'list', label: 'List', icon: <List /> },
    { id: 'grid', label: 'Grid', icon: <GridFour /> },
    { id: 'board', label: 'Board', icon: <SquaresFour /> },
  ]}
  selectedId={view}
  onChange={setView}
/>
// Icon only mode
<SegmentedControl
  iconOnly
  items={[
    { id: 'list', icon: <List /> },
    { id: 'grid', icon: <GridFour /> },
    { id: 'board', icon: <SquaresFour /> },
  ]}
  selectedId={view}
  onChange={setView}
/>
// With dividers
<SegmentedControl
  showDividers
  items={[
    { id: 'all', label: 'All' },
    { id: 'active', label: 'Active' },
    { id: 'archived', label: 'Archived' },
  ]}
  selectedId={status}
  onChange={setStatus}
/>
// Content width mode
<SegmentedControl
  widthMode="content"
  items={[
    { id: 'all', label: 'All' },
    { id: 'active', label: 'Active' },
    { id: 'archived', label: 'Archived' },
  ]}
  selectedId={status}
  onChange={setStatus}
/>
// Neutral type
<SegmentedControl
  type="neutral"
  items={[
    { id: 'all', label: 'All' },
    { id: 'active', label: 'Active' },
    { id: 'archived', label: 'Archived' },
  ]}
  selectedId={status}
  onChange={setStatus}
/>

SegmentItem Interface

interface SegmentItem {
  id: string;        // Unique identifier
  label?: string;    // Button text
  icon?: ReactNode;  // Optional icon
}

Accessibility

Each segment uses role="button" with aria-pressed to indicate selection
Keyboard activation with Enter and Space keys
aria-disabled indicates disabled state
Focus ring visible on keyboard navigation