SegmentedControl

iOS-style segmented toggle — radio behaviour, animated sliding indicator, full keyboard nav (←/→ to move, Enter/Space to select). Use it for view switches, filter buckets, small mode toggles.

Default · md

Full-width · sm

Usage

import { SegmentedControl } from '@bwo-ui/react';

const OPTIONS = [
  { value: 'list', label: 'List' },
  { value: 'grid', label: 'Grid' },
  { value: 'kanban', label: 'Kanban' },
] as const;

<SegmentedControl
  options={OPTIONS}
  value={view}
  onValueChange={setView}
/>

// Full-width
<SegmentedControl options={OPTIONS} value={view} onValueChange={setView} fullWidth />

Props

Prop	Type	Default	Description
`options`	`SegmentedOption<V>[]`	—	Array of { value, label, icon?, disabled? }.
`value`	`V`	—	Controlled value.
`defaultValue`	`V`	—	Uncontrolled default.
`onValueChange`	`(value: V) => void`	—	Fires on selection change.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Height + font preset.
`fullWidth`	`boolean`	`false`	Stretch each segment to equal share of the container.