Navigation
Tabs
Accessible tabbed interface for switching between content panels. Matches WAI-ARIA Tabs pattern (tablist, tab, tabpanel) with roving tabindex and arrow-key navigation. Ideal for call detail (Activity Log / Chat History / Notes), patient sections, or any 2–5 content panels.
Call sections (Activity Log / Chat History / Notes)
Underline-style tabs with optional badges. Active tab indicated by primary color and underline; no background fill.
With icons
Optional icon per tab (decorative, aria-hidden). Icons scale with tab size (sm/md/lg). Ensure labels remain descriptive for accessibility.
Patient record tabs
Multiple tabs with badges (e.g. visit count). Use for overview, visits, documents, billing.
Overview: demographics, insurance, recent activity.
Sizes
Size variants for different contexts. Touch targets meet minimum height for accessibility.
Small
Medium (default)
Large
Disabled tab
Disable individual tabs (e.g. coming soon). Keyboard skips disabled tabs.
Active panel: a
Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Unique identifier for the tabs widget |
label | string | — | Accessible label for the tablist (required) |
tabs | TabOption[] | — | Tab definitions (required); each may have optional icon (Snippet) |
value | string | — | Currently selected tab value |
size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
variant | 'underline' | 'underline' | Visual variant |
class | string | — | Additional CSS classes for the root |
onchange | (value: string) => void | — | Change handler |
children | Snippet<[activeValue: string]> | — | Panel content; receives active tab value |
testId | string | — | Test ID for e2e testing |
Healthcare & accessibility
- • Use
role="tablist",tab,tabpanelwitharia-selected,aria-controls,aria-labelledby. - • Roving tabindex: only the active tab is in the tab order; Arrow Left/Right move focus and activate; Home/End go to first/last.
- • Automatic activation: panel content switches when a tab is focused (click or arrow).
- • Active tab: underline + primary color (no background fill) for clear contrast; meets WCAG AA.
- • Badges are decorative (e.g. message count); ensure tab labels alone are descriptive.
- • Light/dark theme and reduced motion supported via design tokens.
- • Icons are decorative (aria-hidden); tab labels should remain descriptive.