A navigation pattern for switching between related sections of content within the same page context.
Preview
Code
VUE
<Tabs />Props
The value of the currently active tab (v-model)
Props API
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
modelValue | string | "tab1" | — | The value of the currently active tab (v-model) |
Usage
Use tabs to organize content at the same level of hierarchy. Avoid using tabs for step-by-step processes — use a stepper instead. Tabs should remain visible at all times; content should not require scrolling to see the tab panel.
Accessibility
Uses role="tablist", role="tab", and role="tabpanel" for full ARIA tab semantics.
Left/Right arrow keys move focus between tabs.
Active tab has aria-selected="true"; inactive tabs have tabindex="-1".