Tabs
A tab list for switching between views within the same context.
Filled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { value: string; label: string; icon?: IconComponent; disabled?: boolean }[] | The tabs to render. | |
| value | string | Controlled active tab value. | |
| defaultValue | string | Uncontrolled initial active value. | |
| onChange | (value: string) => void | Fires when the active tab changes. | |
| bordered | boolean | true | Shows the bottom border under the whole track. |
| fill | boolean | false | Stretches tabs to share the row's width equally. |
Why it works this way
Why
- Tabs switch between peer panels in one place; the active tab has a 2px underline so the current one reads without colour alone.
Don't
- Don't use them for steps in a sequence. Use Stepper.
- Don't switch views of the same content. SegmentedControl is lighter.