Tab View

Tab View is a container component to group content with tabs.

When to use

Tabbed forms should be used when there is a large amount of information on one screen.
The tabs component lets users navigate between related sections of content, displaying one section at a time.
Tabs can be used to organise content such as forms, settings, and dashboards, so a user does not have to navigate away from their workflow to complete their task.
Use tabs whenever there is a section in the service/ application that requires the user to switch between different views, for example, the different sections and financial displays of a council tax account.
Tabs can be a helpful way of letting users quickly switch between related information if:
- Content can be usefully separated into clearly labeled sections.
- The first section is more relevant than the others for most users.
- Users will not need to view all the sections at once.

Guidelines

Tabs can work well for people who use a service regularly, for example, users of a case working system.
User's need to perform tasks quickly may be greater than their need for the simplicity of first-time use.
Do not use the tabs component if the total amount of content the tabs contain will make the page slow to load.
Do not use the tabs component as a form of page navigation.
Tabs hide content from users and not everyone will notice them or understand how they work.
Do not use tabs if users might need to:
- Read through all of the content in order, for example, to understand a step-by-step process.
- Compare the information in different tabs - having to memorise the information and switch back and forth can be frustrating and difficult.
Test content without tabs first. Consider if it’s better to:
- Simplify and reduce the amount of content.
- Split the content across multiple pages.
- Keep the content on a single page, separated by headings.
- Use a table of contents to let users navigate quickly to specific sections of content.
Tab labels can be wrapped into 2 lines. However, if they are still too long, the text will truncate.
Use clear labels. Tabs hide content, so the tab labels need to make it very clear what they link to, otherwise, users will not know if they need to click on them.
Order the tabs according to user needs. The first tab should be the most commonly needed section. Arrange the other tabs in the order that makes the most sense for the users.
Do not disable tabs. Disabling elements is normally confusing for users. If there is no content for a tab, either remove the tab or, if that would be confusing for users, explain why there is no content when the tab is selected.
Avoid tabs that wrap over more than one line. If there are too many tabs or they have long labels, then they may wrap over more than one line. This makes it harder for users to see the connection between the selected tab and its content.
By default, the first tab is initiated.
Tabs can be used on full-page layouts or in components such as modals, cards, or side panels.
Tabs allow for three states: selected, unselected, and disabled. The default view is that one tab is preselected and is usually the first tab. Only one tab can be selected at a time. When a user chooses a new item, the previous tab is automatically deselected. If a user navigates away from a tab, a user should return to the last tab selected.

Basic

The tab is implemented using the list tag with the role=tablist attribute and consists of one or more tabpanel components.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="header1-tab" data-bs-toggle="tab" data-bs-target="#header1" type="button" role="tab" aria-controls="header1" aria-selected="true">Header I</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="header2-tab" data-bs-toggle="tab" data-bs-target="#header2" type="button" role="tab" aria-controls="header2" aria-selected="false">Header II </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="header3-tab" data-bs-toggle="tab" data-bs-target="#header3" type="button" role="tab" aria-controls="header3" aria-selected="false">Header III</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link disabled" id="header4-tab" data-bs-toggle="tab" data-bs-target="#header4" type="button" role="tab" aria-controls="header4" aria-selected="false">Header IV</button>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
     <div class="tab-pane fade show active" id="header1" role="tabpanel" aria-labelledby="header1-tab">
          <p>...</p>
     </div>
     <div class="tab-pane fade" id="header2" role="tabpanel" aria-labelledby="header2-tab">
          <p>...</p>
     </div>
     <div class="tab-pane fade" id="header3" role="tabpanel" aria-labelledby="header3-tab">
          <p>...</p>
      </div>
      <div class="tab-pane fade" id="header4" role="tabpanel" aria-labelledby="header4-tab">
           <p>...</p>
      </div>
</div>

Size

The tab is implemented using the list tag with the role=tablist attribute and small headings can be achieved by nav-link-sm class.

Accessibility

The tab can be accessed via the keyboard, and when the focus of the tab title is changed, the user can access the content by turning on that focus.
By putting the tabs in a list element, keeps the semantic structure.
Each tab li element has an aria-controls to the content it controls.
Apply aria-selected as true when the tab is activated.
The tablist role identifies the element that serves as the container for a set of tabs e.g. role="tab". The tab content is referred to as tabpanel elements and should have role="tabpanel".
The active tab is highlighted with bold text and a line underneath which must fulfill contrast ratio of more than 3:1.

When to use Guidelines Basic Accessibility