Segmented

A set of mutually exclusive options with a sliding background indicator. Useful for view switching or filtering.

Basic Usage

import { Segmented } from '@airo-ui/react'
import { useState } from 'react'

const options = [
  { label: 'Auto', value: 'auto' },
  { label: 'Article', value: 'article' },
  { label: 'Outline', value: 'outline' },
  { label: 'Title', value: 'title' },
  { label: 'Summary', value: 'summary' },
  { label: 'Rewrite', value: 'rewrite' },
  { label: 'Research', value: 'research' },
]

function Demo() {
  const [value, setValue] = useState('article')

  return <Segmented value={value} onChange={setValue} options={options} />
}

Size

<Segmented value={value} onChange={setValue} options={options} size="sm" />
<Segmented value={value} onChange={setValue} options={options} size="md" />

Disabled

<Segmented value={value} onChange={setValue} options={options} disabled />

API

Props

Name	Type	Default	Description
value	string | number	--	Controlled selected value
defaultValue	string | number	''	Default value (uncontrolled)
options	SegmentedOption[]	[]	Options list
disabled	boolean	false	Disable entire component
size	'sm' | 'md'	'md'	Size
onChange	(value: string | number) => void	--	Value change handler

SegmentedOption

Name	Type	Default	Description
label	string	--	Display text
value	string | number	--	Option value
disabled	boolean	false	Disable this option

Interaction

• White indicator block transitions left + width using --ease-spring spring curve
• Keyboard: left/right arrows to switch, Home / End to jump to first/last
• Selected item text is --color-neutral-950, unselected is --color-neutral-500