Tabs
Switch between peer views inside one surface without navigating away.
Tabs change which content is on screen. If the control is setting a value rather than swapping a view, use a ToggleGroup.
Default
Options are data rather than children, and the component is generic over the value type — so value and onChange are typed to your own union rather than to string.
A note on resizing
.sf-tabs is a padded track: the item is derived as track − var(--space-8) and the indicator is drawn from the same content box. If you re-scale it, re-derive the item height rather than copying the track's — setting both to the same number puts an oversized label in an undersized box, and the text sits below the centre of its own pill.
Props
Tabs
| Prop | Type | Default | Description |
|---|---|---|---|
options | Array<{ value: TValue; label: string }> | — | Required. The tabs, in order. |
value | TValue | null | — | Required. The active tab. |
onChange | (value: TValue) => void | — | Required. Called with the chosen tab's value. |
ariaLabel | string | — | Required. Names the tab list for assistive technology. |
tabClassName / activeTabClassName / inactiveTabClassName | string | — | Per-state class hooks for surface-specific restyling. |