## Overview The `` displays a list of `` element children as `role="tablist"`. An `` element is associated with a sibling `` element via their `value` attribute. When an `` element is `selected`, the associated `` will also be selected, showing that panel and hiding the others. [View the design documentation for this component.](https://spectrum.adobe.com/page/tabs/) ### Usage [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/tabs?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/tabs) [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/tabs?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/tabs) [![Try it on Stackblitz](https://img.shields.io/badge/Try%20it%20on-Stackblitz-blue?style=for-the-badge)](https://stackblitz.com/edit/vitejs-vite-3smxuwr2) ```zsh yarn add @spectrum-web-components/tabs ``` Import the side effectful registration of ``, `` or `` via: ```ts import '@spectrum-web-components/tabs/sp-tabs.js'; import '@spectrum-web-components/tabs/sp-tab.js'; import '@spectrum-web-components/tabs/sp-tab-panel.js'; ``` When looking to leverage the `Tabs`, `Tab`, or `TabPanel` base class as a type and/or for extension purposes, do so via: ```ts import { Tabs, Tab, TabPanel } from '@spectrum-web-components/tabs'; ``` ### Anatomy Tabs are created from the following parts: - **Tabs:** The container component (``) that manages the tab list and handles selection logic. - **Tab item:** An individual tab (``) that users can select to view different content panels. - **Tab view:** The content panel (``) associated with a tab, shown when its corresponding tab is selected. - **Divider:** A visual separator between tab items, used in some variants for clarity. - **Selection indicator:** A visual highlight (such as an underline or bar) that shows which tab is currently selected. ```html Content for Tab 1 Content for Tab 2 Content for Tab 3 Content for Tab 4 ``` ### Options #### Sizes Small ```html demo Content for Tab 1 Content for Tab 2 Content for Tab 3 Content for Tab 4 ``` Medium ```html demo Content for Tab 1 Content for Tab 2 Content for Tab 3 Content for Tab 4 ``` Large ```html demo Content for Tab 1 Content for Tab 2 Content for Tab 3 Content for Tab 4 ``` Extra Large ```html demo Content for Tab 1 Content for Tab 2 Content for Tab 3 Content for Tab 4 ``` #### Variants An `` element will display horizontally by default. It can be modified with attributes like `compact`, and `quiet`, or with content like icons, etc. Compact Compact tabs should never be used without the quiet variation. Please use Quiet + Compact Tabs instead. ```html demo Content for Tab 1 Content for Tab 2 Content for Tab 3 Content for Tab 4 ``` Icons ```html demo Content for Tab 1 Content for Tab 2 Content for Tab 3 Content for Tab 4 ``` Quiet ```html demo Content for Tab 1 Content for Tab 2 Content for Tab 3 Content for Tab 4 ``` Quiet + Compact ```html demo Content for Tab 1 Content for Tab 2 Content for Tab 3 Content for Tab 4 ``` An `` element will display horizontally by default. It can be modified with states like `compact`, `disabled`, and `quiet`, or with content like icons, etc. Vertical tabs should be used when horizontal space is more generous and when the list of sections is greater than can be presented to the user in a horizontal format. Vertical tabs are enabled by setting the `direction` attribute to `vertical` on `sp-tabs`. Compact Compact tabs should never be used without the quiet variation. Please use Quiet + Compact Tabs instead. ```html demo Content for Tab 1 Content for Tab 2 Content for Tab 3 Content for Tab 4 ``` Icons ```html demo Content for Tab 1 Content for Tab 2 Content for Tab 3 Content for Tab 4 ``` Quiet ```html demo Content for Tab 1 Content for Tab 2 Content for Tab 3 Content for Tab 4 ``` Quiet + Compact ```html demo Content for Tab 1 Content for Tab 2 Content for Tab 3 Content for Tab 4 ``` ### States When an `` element is given the `disabled` attribute, its `` children will be disabled as well, preventing a visitor from changing the selected tab. By default, `` children will not be addressed and the available content of the currently selected tab will be fully visible. ```html demo Content for Tab 1 is not selectable Content for Tab 2 is selected Content for Tab 3 is not selectable Content for Tab 4 is not selectable ``` ### Accessibility When an `` has a `selected` value, the `` child of that `value` will be given `[tabindex="0"]` and will receive initial focus when tabbing into the `` element. When no `selected` value is present, the first `` child will be treated in this way. When focus is currently within the `` element, the left and right arrows will move that focus back and forth through the available `` children. #### Include a label Tab items should have a label for accessibility. If a label isn’t present, it must include an icon and becomes an icon-only tab item. #### Use icons only when necessary Icons should only be used in a tab item when absolutely necessary: when adding essential value and having a strong association with the label. If the tab item does not have a visible label, it must still have a tooltip to disclose the label.