A tablist is a group of headers, or tabs, that lets people navigate between different views of related information without going to different pages.
Tablists are great for fitting a lot of information in a small space. They can help reduce scrolling by chunking related information into categories for easier processing. Don't use tablists if it's helpful for people to compare information from two different views.
Tablists are laid out horizontally by default but can optionally be laid out vertically. Horizontal tablists are limited by the width of their container; tabs won’t scroll or wrap onto the next line. If you need to show more tabs, include an overflow menu button.
Tablists are not always effective in smaller layouts. Where there’s limited real estate, consider other options for switching content views, like accordions or dropdowns.
By default, one tab (usually the first) should always be active on first render. Keep this in mind when ordering your content. Use
defaultSelectedValue to define the default active tab.
Tabs that use an icon only must include an
aria-label to identify the tabs to screen readers. Always include a tooltip that describes the icon.
When creating a custom overflow menu button, include
role=”tab” on the button element so that screen readers can identify it as a tab.
Keep tab labels brief, usually a noun or short phrase is best. Use sentence-style capitalization and skip the period. For more info, see Capitalization and Periods in the Microsoft Writing Style Guide.