Tab Container
Groups Tabs into a tab list. The selected background is a single pill that slides to the newly selected tab. Arrow keys, Home and End move focus and selection between tabs.
Overview
No visual options. See Props for what it accepts.
All options
Tab sizes
TabsContainer has no visual props of its own; it adapts to the size of the Tabs inside it.
| size \ content | tabs |
|---|---|
| medium | Overview Activity Settings |
| small | Overview Activity Settings |
| tiny | Overview Activity Settings |
Examples
Controlled tabs
Keep the selected tab in state and pass isSelected and onClickTab to each Tab.
Overview
Activity
Settings
Selected: Overview
Accessibility
Keyboard
Arrow Left and Arrow Right move focus to the previous or next tab and select it; Home and End jump to the first and last tab. Only the selected tab is in the Tab order.
Roles
The container has role="tablist" and each Tab has role="tab" with aria-selected.
Reduced motion
The sliding pill does not animate when the user prefers reduced motion.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
| children | React.ReactNode | Yes | — |