Tab components
A tab component starts a named tab within a tabbed content section. It is a structural component: its label becomes the tab title, and the following components belong to that tab until a later tab or a tabs-end component changes the structure.
Tabs can help organise a small number of parallel content categories. They should not hide steps that every person must complete, because people may not discover all tabs.
Choose meaningful tab titles
Write short, specific titles that describe the content inside:
Your detailsSupporting informationSummary
Avoid generic titles such as Tab 1, More, or Other. A person should be able to predict the content before opening the tab.
flowchart LR
A[Tab: Your details] --> B[Related components]
C[Tab: Supporting information] --> D[Related components]
E[Tabs end] --> F[Normal page content resumes]Use tabs only for parallel content
Use tabs where categories are independent and a person may need to move between them to compare information. Keep the number of tabs small and their content roughly balanced.
Do not use tabs to divide a linear form into steps. Use separate pages and normal navigation for that. Do not put essential instructions in a tab that a person may never open.
Test keyboard tab selection, the selected state, focus order, long titles, narrow displays and the full reading order without relying on the visual tab styling.
Keep shared instructions outside the tabs
Place instructions that apply to every category before the first tab. Place a shared summary or next-step content after the tabs-end marker. This means people do not need to open each tab to discover an important instruction, and the page remains understandable when tabs are read in sequence.
If a tab contains a question that affects a later tab, consider using normal pages instead. Tabs work best for parallel reference material or independent categories, not for a sequence where one answer controls the next task.
Maintain the tab structure
The tab title is part of the component structure. When changing a title, review any content, links or instructions that refer to it. When moving components, check they are still inside the intended tab and that a tabs-end component follows the final tab.
Test checklist
- Titles are short, specific and mutually distinguishable.
- Essential instructions are outside the tabs or repeated where needed.
- Keyboard users can move between tabs and discover the selected content.
- The reading order makes sense without visual tab styling.
- Long or translated titles remain usable at narrow widths.