Segmented
Switch between two to four equal views or values. One is always selected.
Usage
import { Segmented } from '@smartui/react';
import '@smartui/react/styles.css';When to use
- Changing how the same data is viewed: Day, Week, Month.
When not to use
- More than four options. Use Tabs or Select.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { key, label }[] | required | |
label | string | required | |
value, defaultValue, onChange | string, string, (key) => void | - | |
size | 'sm' | 'md' | 'md' | |
fullWidth | boolean | false |
Accessibility
- Announced as a single-choice group. Arrow keys move between segments.