Forms
Segmented Control
A toggle that picks one option from a row. Arrow keys move between options.
ReactVueWeb Components
View in Storybook Playground
Examples
<SegmentedControl
aria-label="表示"
options={[{ value: 'list', label: 'リスト' }, { value: 'grid', label: 'グリッド' }]}
defaultValue="list"
/>Props
| Name | Type | Default | Description |
|---|---|---|---|
options required | SegmentedOption[] | — | The segments. |
value | string | — | Controlled selected value. |
defaultValue | string | — | Initial value when uncontrolled. |
onChange | (value: string) => void | — | Called with the newly selected value. |
name | string | — | Radio-group name (auto-generated if omitted). |
size | 'sm' | 'md' | 'lg' | md | Control size. @default 'md' |
block | boolean | false | Stretch to fill the container width. @default false |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.