Tabs
Panelled tabs with underline and pill presentations.
Loading interactive example
Use Tabs to switch between peer sections that share the same page context. The underline variant uses only an active underline. Use the pill variant for a contained group. The active indicator moves between tabs in either orientation. Initial layout and resize do not animate. Reduced motion places it immediately.
API
| Member | Type | Kind | Required | Default |
|---|---|---|---|---|
ariaLabel | string | prop | No | undefined |
onValueChange | (value: T) => void | callback | No | undefined |
orientation | "horizontal" | "vertical" | prop | No | 'horizontal' |
panel | Snippet<[{ value: T; }]> | snippet | No | undefined |
selectWhenFocused | boolean | prop | No | false |
size | ControlSize | prop | No | 'md' |
tabs | readonly TabItem<T>[] | prop | Yes | |
value | T | binding | No | undefined as T | undefined |
variant | TabsVariant | prop | No | 'underline' |
Source
Loading source