# Tab components

Source: https://govform.com/resources/documentation/article/23-13-component-tab
Topic: Component Settings

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 details`
-   `Supporting information`
-   `Summary`

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.

## Related guidance

-   [Tabs end components](<https://govform.com/resources/documentation/article/23-14-component-tabs-end>)
-   [Design pages and navigation](<https://govform.com/resources/documentation/article/05-design-pages-and-navigation>)
-   [Design accessible services](<https://govform.com/resources/documentation/article/14-design-accessible-services>)