Navigation
Tabs
An accessible tabbed interface. Supports roving tabindex, arrow key navigation, and a pills variant.
LlmTabGroup + LlmTabDemo
Live PreviewReact
Billing (disabled)
jsx
<LlmTabGroup selectedIndex={0}>
<LlmTab label="Account">Account settings content.</LlmTab>
<LlmTab label="Notifications">Notification preferences.</LlmTab>
<LlmTab label="Billing" disabled={true}>Billing info.</LlmTab>
</LlmTabGroup>API (Angular)
| Prop | Type | Default | Description |
|---|---|---|---|
selectedIndex | number | 0 | Index of the selected tab |
onSelectedIndexChange | (index: number) => void | — | Called when selection changes |
variant | 'default' | 'pills' | 'default' | Visual style of the tab strip |
Composition parts
Tabs is composed from the parts below. Each part is its own component — drop the ones you don't need.
LlmTab
A single tab + panel pair. Children render inside the panel; the label renders in the tablist.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Text shown on the tab button (required). |
disabled | boolean | false | Skip this tab in keyboard navigation and prevent activation. |
Import
ts
import { LlmTabGroup, LlmTab } from '@atelier-ui/angular';Accessibility
ARIA roletablist / tab / tabpanel
| Key | Action |
|---|---|
| Arrow Left / Right | Move between tabs. Focus wraps at the ends. |
| Home / End | Jump to the first / last tab. |
| Enter / Space | Activate the focused tab (manual activation mode). |
- Tabs use roving tabindex — only the active tab is in the document tab sequence.
- Each LlmTab has aria-controls pointing at its panel, and the panel has aria-labelledby pointing back at the tab. Disabled tabs are skipped by arrow navigation.
See the accessibility overview for the site-wide WCAG stance.