Segmented Control

Forms
Selection

Tab-like selector with animated sliding indicator for switching between options.

Need content panels? Use Tabs when you need to switch between different content areas.

Preview

Simple segmented control with smooth animated indicator

Selected View: list

Variants

Available style variants

Default
Filled
Outline

Sizes

Available in small, medium, and large sizes

Small
Medium (Default)
Large

Two Options

Perfect for binary choices like billing toggles

Selected plan cycle: monthly

Props

Component API reference

SegmentedControl

PropTypeDefaultDescription
options*SegmentedOption[]—Array of selectable options
value*string—Selected option value
onChange*(value: string) => void—Callback when selection changes
variant'default' | 'filled' | 'outline''default'Visual style variant
size'sm' | 'md' | 'lg''md'Control size
disabledbooleanfalseDisable all options
classNamestring—Additional CSS classes

SegmentedOption

PropTypeDefaultDescription
value*string—Unique value for the option
label*string—Display label for the option
disabledboolean—Disable this specific option

Usage

Import and implementation examples

import { SegmentedControl, type SegmentedOption } from '@/components/ui/segmented-control'
import { useState } from 'react'

const options: SegmentedOption[] = [
  { value: 'list', label: 'List' },
  { value: 'grid', label: 'Grid' },
  { value: 'kanban', label: 'Kanban' },
]

function MyComponent() {
  const [view, setView] = useState('list')

  return (
    <SegmentedControl
      options={options}
      value={view}
      onChange={setView}
    />
  )
}

// With variants
<SegmentedControl
  options={options}
  value={view}
  onChange={setView}
  variant="filled"
/>

// With sizes
<SegmentedControl
  options={options}
  value={view}
  onChange={setView}
  size="sm"
/>

Features

Built-in functionality

  • Animated indicator: Smooth sliding animation between options
  • Automatic spacing: Width calculation for even spacing
  • Three variants: Default, filled, and outline styles
  • Three sizes: Small, medium, and large options
  • Keyboard navigation: Arrow keys to navigate options
  • Flexible options: Works with 2 to 6+ options
  • Controlled component: Full control over state
  • Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses role="radiogroup" for containerrole="radio" for each optionaria-checked for selected statearia-disabled for disabled options

Keyboard Navigation

KeyAction
Arrow Left/RightNavigate between options
Enter/SpaceSelect focused option
TabMove focus to/from control

Notes

  • Focus indicator visible on keyboard navigation
  • Screen reader announces selection changes
  • Disabled options are not focusable

Related Components

TabsToggle GroupRadio Group