Component

Segmented Control

A pill-shaped single-select control for switching between a small set of mutually exclusive options. Uses radio semantics (role="radiogroup") with roving tabindex and full arrow-key navigation.

Basic

Controlled selection via value and onValueChange. Arrow keys move between options; Home/End jump to the first/last.

Selected: week

Installation

$pnpm add @refraction-ui/react-segmented-control

Usage

tsx

import {
  SegmentedControl,
  SegmentedControlItem,
} from '@refraction-ui/react-segmented-control'

export function MyComponent() {
  const [view, setView] = useState('week')
  return (
    <SegmentedControl aria-label="View range" value={view} onValueChange={setView}>
      <SegmentedControlItem value="day">Day</SegmentedControlItem>
      <SegmentedControlItem value="week">Week</SegmentedControlItem>
      <SegmentedControlItem value="month">Month</SegmentedControlItem>
    </SegmentedControl>
  )
}

Sizes

Two sizes: sm and md (default).

md (default)

With icons

Place a leading icon before the label as part of the item children.

SegmentedControl props

Prop	Type	Default	Description
`value`	`string`	--	Controlled selected item value. Pair with onValueChange.
`defaultValue`	`string`	--	Initial selected value for uncontrolled usage.
`onValueChange`	`(value: string) => void`	--	Called with the newly selected item value.
`size`	`'sm' \| 'md'`	`'md'`	Visual size of the control.
`className`	`string`	--	Additional CSS classes for the radiogroup container.

SegmentedControlItem props

Prop	Type	Default	Description
`value`	`string`	--	Value identifying this item; selected when it matches the group value.
`children`	`ReactNode`	--	Item content. May include a leading icon before the label.
`className`	`string`	--	Additional CSS classes for the radio item.