UI Component LabNavigation
Tabs
Switches between panels of related content, showing one panel at a time.
Demo
Name and photo.
Email and push settings.
Password and sign-in methods.
Also known as
- Tab view — Apple Human Interface Guidelines
- TabList — Fluent UI React v9
How to recognize it
A row of labels above a content area. The selected label is highlighted, often with an underline, and only its panel is visible.
Behavior
- Clicking a tab shows its panel and hides the others.
- Only the selected tab is in the Tab order; arrow keys move between tabs.
- In this demo, moving focus with the arrow keys also selects the tab (automatic activation).
Keyboard
| Key | Action |
|---|---|
| Tab | Moves focus into the tab list (to the selected tab), then to the panel. |
| ← / → | Moves to the previous / next tab and selects it. |
| Home | Moves to the first tab. |
| End | Moves to the last tab. |
Usage notes
- Do not use tabs for site navigation, step-by-step flows, filtering, or content users need to compare side by side.
Similar components
- Carousel: Tabs let the user jump to any panel by its name; a carousel steps through slides in order with previous and next buttons.
- Accordion: Tabs show one panel at a time side by side; an accordion stacks sections vertically and can open several at once.
- Stepper: Tabs can be opened in any order; a stepper shows steps that are completed in a fixed order.
Sources
- Open UI: Tabs (Last checked: )
- WAI-ARIA APG: Tabs Pattern (Last checked: )
- デジタル庁デザインシステムウェブサイト「タブ」をもとに作成 (Last checked: )