Segmented Control

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 (e.g., Settings with Account, Profile, Security panels).

Basic Usage

Simple segmented control with smooth animated indicator transition.

Selected View: list

Two Options

Perfect for binary choices like Monthly/Yearly billing toggles.

Selected billing cycle: monthly

Multiple Options

Works with 4+ options for content filtering and categorization.

Showing: all items

Filled Variant

Filled style with stronger visual emphasis on the selected option.

Outline Variant

Outline style with border emphasis on the selected option.

Sizes

Available in small, medium (default), and large sizes.

Small

Medium (Default)

Large

Features

•Smooth animated indicator sliding between options
•Automatic width calculation for even spacing
•Three style variants: default, filled, outline
•Three size options: sm, md, lg
•Keyboard navigation support
•Works with 2 to 6+ options
•Controlled component pattern

API Reference

SegmentedControlProps

Prop	Type	Default	Description
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
disabled	boolean	false	Disable all options
className	string	-	Additional CSS classes

SegmentedOption

Property	Type	Description
value	string	Unique value for the option
label	string	Display label for the option
disabled	boolean	Disable this specific option

Usage

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

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}
    />
  )
}