sp-tabs

NPM

1.0.1

Storybook

View Storybook

Try it on

webcomponents.dev

Examples

API

Changelog

Attributes and Properties #

Property

Attribute

Type

Default

Description

auto

boolean

false

Whether to activate a tab on keyboard focus or not.

By default a tab is activated via a "click" interaction. This is specifically intended for when tab content cannot be displayed instantly, e.g. not all of the DOM content is available, etc. To learn more about "Deciding When to Make Selection Automatically Follow Focus", visit: https://w3c.github.io/aria-practices/#kbd_selection_follows_focus

compact

boolean

false

The tab items are displayed closer together.

direction

'vertical' | 'vertical-right' | 'horizontal'

'horizontal'

disabled

boolean

false

Disable this control. It will not receive focus or events

emphasized

boolean

false

enableTabsScroll

boolean

false

label

string

''

quiet

boolean

false

The tab list is displayed without a border.

tabIndex

number

The tab index to apply to this control. See general documentation about the tabindex HTML property

Slots #

Name

Description

default slot

Tab elements to manage as a group

tab-panel

Tab Panel elements related to the listed Tab elements

Events #

Name

Type

Description

change

Event

The selected Tab child has changed.

1.0.1 (2024-11-11) #

Note: Version bump only for package @spectrum-web-components/tabs

1.0.0 (2024-10-31) #

Note: Version bump only for package @spectrum-web-components/tabs

0.49.0 (2024-10-15) #

Bug Fixes #

tabs: scroll exceeding tabs limit (#4722) (fc9a448)

0.48.1 (2024-10-01) #

Note: Version bump only for package @spectrum-web-components/tabs

0.48.0 (2024-09-17) #

Note: Version bump only for package @spectrum-web-components/tabs

0.47.2 (2024-09-03) #

Note: Version bump only for package @spectrum-web-components/tabs

0.47.1 (2024-08-27) #

Note: Version bump only for package @spectrum-web-components/tabs

0.47.0 (2024-08-20) #

Note: Version bump only for package @spectrum-web-components/tabs

0.46.0 (2024-08-08) #

Note: Version bump only for package @spectrum-web-components/tabs

0.45.0 (2024-07-30) #

Bug Fixes #

tabs: prevent vertical auto scroll (#4613) (e1ef097)

0.44.0 (2024-07-15) #

Note: Version bump only for package @spectrum-web-components/tabs

0.43.0 (2024-06-11) #

Note: Version bump only for package @spectrum-web-components/tabs

0.42.5 (2024-05-24) #

Note: Version bump only for package @spectrum-web-components/tabs

0.42.4 (2024-05-14) #

Note: Version bump only for package @spectrum-web-components/tabs

0.42.3 (2024-05-01) #

Note: Version bump only for package @spectrum-web-components/tabs

0.42.2 (2024-04-03) #

Note: Version bump only for package @spectrum-web-components/tabs

0.42.1 (2024-04-02) #

Note: Version bump only for package @spectrum-web-components/tabs

0.42.0 (2024-03-19) #

Bug Fixes #

styles, theme: surface exports that omit Spectrum Vars proactively (#4142) (5b524c1)
tab-overflow: improve tab navigation experience and support custom aria labels (#4165) (9c9bf95)

Features #

asset: use core tokens (99e76f4)

0.41.2 (2024-03-05) #

Note: Version bump only for package @spectrum-web-components/tabs

0.41.1 (2024-02-22) #

Bug Fixes #

tabs: bring selected tab into view (#4032) (a187057)

0.41.0 (2024-02-13) #

Note: Version bump only for package @spectrum-web-components/tabs

0.40.5 (2024-02-05) #

Bug Fixes #

tabs: account for the indicator bar in the overflow decorator (f4a8744)

0.40.4 (2024-01-29) #

Note: Version bump only for package @spectrum-web-components/tabs

0.40.3 (2024-01-11) #

Note: Version bump only for package @spectrum-web-components/tabs

0.40.2 (2023-12-18) #

Note: Version bump only for package @spectrum-web-components/tabs

0.40.1 (2023-12-05) #

Bug Fixes #

tabs: prevent vertical scrolling in overflow tabs (eb0592f)

0.40.0 (2023-11-16) #

Note: Version bump only for package @spectrum-web-components/tabs

0.39.4 (2023-11-02) #

Note: Version bump only for package @spectrum-web-components/tabs

0.39.3 (2023-10-18) #

Note: Version bump only for package @spectrum-web-components/tabs

0.39.2 (2023-10-13) #

Note: Version bump only for package @spectrum-web-components/tabs

0.39.1 (2023-10-06) #

Note: Version bump only for package @spectrum-web-components/tabs

0.39.0 (2023-09-25) #

Note: Version bump only for package @spectrum-web-components/tabs

0.38.0 (2023-09-05) #

Note: Version bump only for package @spectrum-web-components/tabs

0.37.0 (2023-08-18) #

Note: Version bump only for package @spectrum-web-components/tabs

0.36.0 (2023-08-18) #

Note: Version bump only for package @spectrum-web-components/tabs

0.35.0 (2023-07-31) #

Bug Fixes #

tabs: allow bi-directional arrow key navigation in both orientations (#3410) (ea10049)

0.34.0 (2023-07-11) #

Features #

tabs,top-nav: use Core Tokens (c6ba355)

0.33.2 (2023-06-14) #

Note: Version bump only for package @spectrum-web-components/tabs

0.33.0 (2023-06-08) #

Note: Version bump only for package @spectrum-web-components/tabs

0.32.0 (2023-06-01) #

Note: Version bump only for package @spectrum-web-components/tabs

0.31.0 (2023-05-17) #

Note: Version bump only for package @spectrum-web-components/tabs

0.30.0 (2023-05-03) #

Bug Fixes #

allow "updateComplete" to resolve to a boolean like the LitElement default (6127946)
allow Tab elements to accept slotted DOM content (29c9517)
check if current selected value exists before setting selected attr (1878ca3)
correct @element jsDoc listing across library (c97a632)
ensure browser understandable extensions (f4e59f7)
ensure that updates to Tab element content update the Selection Indicator (94891eb)
extract and share tshirt size styles (3acfc30)
extract and share tshirt size styles (b1440f7)
include default export in the "exports" fields (f32407d)
include the "types" entry in package.json files (b432f59)
keep compact property (904df71)
keep compact property (b5af15f)
manually support WHCM in tabs (11884f1)
move hover/focus hoisting into conditioning (15ac2f7)
proper overflow rtl support (9b1c9d4)
remove attribute binding logic (1f6833f)
remove attribute binding logic (7bce0ae)
stop merging selectors in a way that alters the cascade (369388f)
support matching keydown to [dir] (70b40a9)
tab indicator positioning (8c20769)
tabs: add "emphasized" and correct WHCM delivery (27940bd)
tabs: add "quiet", "compact", and "emphasized" "direction=vertical" (26fff53)
tabs: add "tablist" part to manage list styles (bbf8074)
tabs: added test (7d5f41f)
tabs: bind tabindicator update to dir value (09598b5)
tabs: bind tabs overflow state with sp-tabs (a07c45b)
tabs: bind tabs overflow state with sp-tabs (570a2cd)
tabs: correct entry focus element (64407d3)
tabs: correct indicator size by scaling from 100px (a3fb68b)
tabs: ensure only one active tab stop in the tabs (68b2523)
tabs: ensure tabs has layout (7aba515)
tabs: ensure that "auto" attribute is respected (d200775)
tabs: error on click - undefined tab target (9742227)
tabs: include sp-tab-panel.js in the export map (1619ae8)
tabs: manage disabled state on tabs and tab elements (58def1f)
tabs: update css workarounds (c2a17e0)
top-nav: prototype top-nav pattern (9708f6f)
update indicator animation for loading and content direction (f607f8b)
update latest Spectrum CSS beta releases (d8d3acc)
update side effect listings (8160d3a)
update to latest spectrum-css packages (a5ca19f)
use CSS position relative and revert Tabs.ts changes (a682bcf)
use latest @spectrum-css/* versions (c35eb86)
use ObserveSlotText mixin to prevent white space from overriding label attribute (610fb4b)
use typescript@^4.5 for "native" document.fonts typings (a3e4aea)

Features #

action-button: add action button pattern (03ac00a)
adopt DNA@7 base Spectrum CSS (e08cafd)
apply sizedMixin for t-shirt sizing (d7b63fb)
icons-workflow: vend fully registered icon components (941f3a4)
include all Dev Mode files in side effects (f70817c)
leverage "exports" field in package.json (321abd7)
shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
tabs-overflow: address comments (b0e3398)
tabs-overflow: first round implementation of sp-tabs-overflow (c5b589a)
tabs: add sp-tab-panel element (b17d276)
tabs: add test coverage, remove unused property from component class (9933ad8)
tabs: add test coverage, update import paths (d104b52)
tabs: moving tabs overflow under tabs package (a18c692)
tabs: update bundle setup and readme (0249b94)
tabs: update imports to get correct coverage (2e421cd)
tabs: update spectrum css input (d875a0c)
update card and tabs to latest spectrum-css (55b8d67)
update lit-* dependencies, wip (377f3c8)
update to Spectrum CSS v3.0.0 (e8b3d8f)
use latest exports specification (a7ecf4b)
use SixedMixin to manage "size" property (8819821)

Performance Improvements #

reduce render cycles when managing "dir" attribute (7b28309)

0.11.4 (2023-04-24) #

Note: Version bump only for package @spectrum-web-components/tabs

0.11.3 (2023-04-05) #

Performance Improvements #

reduce render cycles when managing "dir" attribute (7b28309)

0.11.2 (2023-03-22) #

Bug Fixes #

extract and share tshirt size styles (3acfc30)
extract and share tshirt size styles (b1440f7)
keep compact property (904df71)
keep compact property (b5af15f)
move hover/focus hoisting into conditioning (15ac2f7)
proper overflow rtl support (9b1c9d4)
remove attribute binding logic (1f6833f)
remove attribute binding logic (7bce0ae)
tabs: bind tabs overflow state with sp-tabs (a07c45b)
tabs: bind tabs overflow state with sp-tabs (570a2cd)

0.11.1 (2023-03-08) #

Note: Version bump only for package @spectrum-web-components/tabs

0.11.0 (2023-02-21) #

Features #

tabs-overflow: address comments (b0e3398)
tabs-overflow: first round implementation of sp-tabs-overflow (c5b589a)
tabs: add test coverage, remove unused property from component class (9933ad8)
tabs: add test coverage, update import paths (d104b52)
tabs: moving tabs overflow under tabs package (a18c692)
tabs: update bundle setup and readme (0249b94)
tabs: update imports to get correct coverage (2e421cd)

0.10.7 (2023-02-08) #

Bug Fixes #

tabs: correct indicator size by scaling from 100px (a3fb68b)

0.10.6 (2023-01-23) #

Note: Version bump only for package @spectrum-web-components/tabs

0.10.5 (2023-01-09) #

Note: Version bump only for package @spectrum-web-components/tabs

0.10.4 (2022-12-08) #

Note: Version bump only for package @spectrum-web-components/tabs

0.10.3 (2022-11-21) #

Note: Version bump only for package @spectrum-web-components/tabs

0.10.2 (2022-11-14) #

Bug Fixes #

tab indicator positioning (8c20769)
use CSS position relative and revert Tabs.ts changes (a682bcf)

0.10.1 (2022-10-28) #

Note: Version bump only for package @spectrum-web-components/tabs

0.10.0 (2022-10-17) #

Bug Fixes #

tabs: update css workarounds (c2a17e0)

Features #

update card and tabs to latest spectrum-css (55b8d67)

0.9.2 (2022-10-10) #

Note: Version bump only for package @spectrum-web-components/tabs

0.9.1 (2022-09-14) #

Bug Fixes #

tabs: add "quiet", "compact", and "emphasized" "direction=vertical" (26fff53)

0.9.0 (2022-08-09) #

Features #

include all Dev Mode files in side effects (f70817c)

0.8.15 (2022-08-04) #

Bug Fixes #

tabs: add "tablist" part to manage list styles (bbf8074)

0.8.14 (2022-07-18) #

Note: Version bump only for package @spectrum-web-components/tabs

0.8.13 (2022-06-29) #

Note: Version bump only for package @spectrum-web-components/tabs

0.8.12 (2022-06-07) #

Note: Version bump only for package @spectrum-web-components/tabs

0.8.11 (2022-05-27) #

Note: Version bump only for package @spectrum-web-components/tabs

0.8.10 (2022-05-12) #

Bug Fixes #

tabs: add "emphasized" and correct WHCM delivery (27940bd)

0.8.9 (2022-04-21) #

Note: Version bump only for package @spectrum-web-components/tabs

0.8.8 (2022-03-30) #

Note: Version bump only for package @spectrum-web-components/tabs

0.8.7 (2022-03-08) #

Note: Version bump only for package @spectrum-web-components/tabs

0.8.6 (2022-03-04) #

Bug Fixes #

manually support WHCM in tabs (11884f1)

0.8.5 (2022-02-22) #

Bug Fixes #

tabs: ensure that "auto" attribute is respected (d200775)

0.8.4 (2022-02-02) #

Note: Version bump only for package @spectrum-web-components/tabs

0.8.3 (2022-01-26) #

Bug Fixes #

tabs: added test (7d5f41f)
tabs: error on click - undefined tab target (9742227)

0.8.2 (2022-01-07) #

Note: Version bump only for package @spectrum-web-components/tabs

0.8.1 (2021-12-13) #

Bug Fixes #

allow Tab elements to accept slotted DOM content (29c9517)
ensure that updates to Tab element content update the Selection Indicator (94891eb)
use typescript@^4.5 for "native" document.fonts typings (a3e4aea)

0.8.0 (2021-11-08) #

Features #

update lit-* dependencies, wip (377f3c8)

0.7.1 (2021-11-08) #

Note: Version bump only for package @spectrum-web-components/tabs

0.7.0 (2021-11-02) #

Features #

adopt DNA@7 base Spectrum CSS (e08cafd)

0.6.10 (2021-10-12) #

Note: Version bump only for package @spectrum-web-components/tabs

0.6.9 (2021-09-20) #

Note: Version bump only for package @spectrum-web-components/tabs

0.6.8 (2021-09-13) #

Note: Version bump only for package @spectrum-web-components/tabs

0.6.7 (2021-08-24) #

Bug Fixes #

correct @element jsDoc listing across library (c97a632)

0.6.6 (2021-08-03) #

Bug Fixes #

allow "updateComplete" to resolve to a boolean like the LitElement default (6127946)

0.6.5 (2021-07-22) #

Bug Fixes #

tabs: ensure tabs has layout (7aba515)
tabs: manage disabled state on tabs and tab elements (58def1f)

0.6.4 (2021-07-01) #

Bug Fixes #

update indicator animation for loading and content direction (f607f8b)

0.6.3 (2021-06-16) #

Note: Version bump only for package @spectrum-web-components/tabs

0.6.2 (2021-06-07) #

Bug Fixes #

use ObserveSlotText mixin to prevent white space from overriding label attribute (610fb4b)

0.6.1 (2021-05-25) #

Bug Fixes #

tabs: include sp-tab-panel.js in the export map (1619ae8)

0.6.0 (2021-05-24) #

Features #

tabs: add sp-tab-panel element (b17d276)

0.5.6 (2021-05-12) #

Note: Version bump only for package @spectrum-web-components/tabs

0.5.5 (2021-04-09) #

Note: Version bump only for package @spectrum-web-components/tabs

0.5.4 (2021-03-29) #

Note: Version bump only for package @spectrum-web-components/tabs

0.5.3 (2021-03-22) #

Note: Version bump only for package @spectrum-web-components/tabs

0.5.2 (2021-03-22) #

Note: Version bump only for package @spectrum-web-components/tabs

0.5.1 (2021-03-05) #

Note: Version bump only for package @spectrum-web-components/tabs

0.5.0 (2021-03-04) #

Features #

use latest exports specification (a7ecf4b)

0.4.3 (2021-02-11) #

Bug Fixes #

update to latest spectrum-css packages (a5ca19f)

0.4.2 (2021-02-02) #

Note: Version bump only for package @spectrum-web-components/tabs

0.4.1 (2021-01-28) #

Note: Version bump only for package @spectrum-web-components/tabs

0.4.0 (2021-01-21) #

Bug Fixes #

include the "types" entry in package.json files (b432f59)
stop merging selectors in a way that alters the cascade (369388f)
update latest Spectrum CSS beta releases (d8d3acc)
use latest @spectrum-css/* versions (c35eb86)

Features #

apply sizedMixin for t-shirt sizing (d7b63fb)
use SixedMixin to manage "size" property (8819821)
action-button: add action button pattern (03ac00a)
icons-workflow: vend fully registered icon components (941f3a4)
tabs: update spectrum css input (d875a0c)

0.3.0 (2021-01-13) #

Bug Fixes #

include the "types" entry in package.json files (b432f59)
stop merging selectors in a way that alters the cascade (369388f)
update latest Spectrum CSS beta releases (d8d3acc)
use latest @spectrum-css/* versions (c35eb86)

Features #

apply sizedMixin for t-shirt sizing (d7b63fb)
use SixedMixin to manage "size" property (8819821)
action-button: add action button pattern (03ac00a)
icons-workflow: vend fully registered icon components (941f3a4)
tabs: update spectrum css input (d875a0c)

0.2.4 (2020-10-12) #

Note: Version bump only for package @spectrum-web-components/tabs

0.2.3 (2020-10-12) #

Bug Fixes #

include default export in the "exports" fields (f32407d)

0.2.2 (2020-09-25) #

Bug Fixes #

check if current selected value exists before setting selected attr (1878ca3)
update side effect listings (8160d3a)

0.2.1 (2020-09-14) #

Bug Fixes #

top-nav: prototype top-nav pattern (9708f6f)

0.2.0 (2020-08-31) #

Bug Fixes #

tabs: bind tabindicator update to dir value (09598b5)
support matching keydown to dir

Features #

update to Spectrum CSS v3.0.0 (e8b3d8f)

0.1.3 (2020-08-19) #

Note: Version bump only for package @spectrum-web-components/tabs

0.1.2 (2020-07-27) #

Bug Fixes #

ensure browser understandable extensions (f4e59f7)

0.1.1 (2020-07-22) #

Bug Fixes #

tabs: correct entry focus element (64407d3)

0.1.0 (2020-07-17) #

Bug Fixes #

tabs: ensure only one active tab stop in the tabs (68b2523)

Features #

leverage "exports" field in package.json (321abd7)

Description #

The <sp-tabs> displays a list of <sp-tab> element children as role="tablist". An <sp-tab> element is associated with a sibling <sp-tab-panel> element via their value attribute. When an <sp-tab> element is selected, the associated <sp-tab-panel> will also be selected, showing that panel and hiding the others.

Usage #

yarn add @spectrum-web-components/tabs

Import the side effectful registration of <sp-tabs>, <sp-tab> or <sp-tab-panel> via:

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:

import {
    Tabs,
    Tab,
    TabPanel
} from '@spectrum-web-components/tabs';

Sizes #

Small

<sp-tabs selected="1" size="s">
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Medium

<sp-tabs selected="1" size="m">
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Large

<sp-tabs selected="1" size="l">
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Extra Large

<sp-tabs selected="1" size="xl">
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Horizontal Tabs #

An <sp-tabs> element will display horizontally by default. It can be modified with states like compact, disabled, 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.

<sp-tabs selected="1" compact>
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Disabled

When an <sp-tabs> element is given the disabled attribute its <sp-tab> children will be disabled as well, preventing a visitor from changing the selected tab. By default, <sp-tab-panel> children will not be addressed and the available content of the currently selected tab will be fully visible.

<sp-tabs selected="2" disabled>
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1 is not selectable</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2 is selected</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3 is not selectable</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4 is not selectable</sp-tab-panel>
</sp-tabs>

Icons

<sp-tabs selected="1">
    <sp-tab label="Tab 1" value="1">
        <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
    </sp-tab>
    <sp-tab label="Tab 2" value="2">
        <sp-icon-close slot="icon"></sp-icon-close>
    </sp-tab>
    <sp-tab label="Tab 3" value="3">
        <sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
    </sp-tab>
    <sp-tab label="Tab 4" value="4">
        <sp-icon-help slot="icon"></sp-icon-help>
    </sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Quiet

<sp-tabs selected="1" quiet>
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Quiet + Compact

<sp-tabs selected="1" quiet compact>
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Vertical Tabs #

An <sp-tabs> element will display horizontally by default. It can be modified with states like compact, disabled, 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.

<sp-tabs selected="1" compact direction="vertical">
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Disabled

<sp-tabs selected="2" disabled direction="vertical">
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1 is not selectable</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2 is selected</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3 is not selectable</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4 is not selectable</sp-tab-panel>
</sp-tabs>

Icons

<sp-tabs selected="1" direction="vertical">
    <sp-tab label="Tab 1" value="1">
        <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
    </sp-tab>
    <sp-tab label="Tab 2" value="2">
        <sp-icon-close slot="icon"></sp-icon-close>
    </sp-tab>
    <sp-tab label="Tab 3" value="3">
        <sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
    </sp-tab>
    <sp-tab label="Tab 4" value="4">
        <sp-icon-help slot="icon"></sp-icon-help>
    </sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Quiet

<sp-tabs selected="1" quiet direction="vertical">
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Quiet + Compact

<sp-tabs selected="1" quiet compact direction="vertical">
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
    <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
    <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
    <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
    <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>

Accessibility #

When an <sp-tabs> has a selected value, the <sp-tab> child of that value will be given [tabindex="0"] and will receive initial focus when tabbing into the <sp-tabs> element. When no selected value is present, the first <sp-tab> child will be treated in this way. When focus is currently within the <sp-tabs> element, the left and right arrows will move that focus back and forth through the available <sp-tab> children.

Spectrum Web Components

sp-tabs

NPM

1.0.1

Storybook

View Storybook

Try it on

webcomponents.dev

Attributes and Properties #

Slots #

Events #

1.0.1 (2024-11-11) #

1.0.0 (2024-10-31) #

0.49.0 (2024-10-15) #

Bug Fixes #

0.48.1 (2024-10-01) #

0.48.0 (2024-09-17) #

0.47.2 (2024-09-03) #

0.47.1 (2024-08-27) #

0.47.0 (2024-08-20) #

0.46.0 (2024-08-08) #

0.45.0 (2024-07-30) #

Bug Fixes #

0.44.0 (2024-07-15) #

0.43.0 (2024-06-11) #

0.42.5 (2024-05-24) #

0.42.4 (2024-05-14) #

0.42.3 (2024-05-01) #

0.42.2 (2024-04-03) #

0.42.1 (2024-04-02) #

0.42.0 (2024-03-19) #

Bug Fixes #

Features #

0.41.2 (2024-03-05) #

0.41.1 (2024-02-22) #

Bug Fixes #

0.41.0 (2024-02-13) #

0.40.5 (2024-02-05) #

Bug Fixes #

0.40.4 (2024-01-29) #

0.40.3 (2024-01-11) #

0.40.2 (2023-12-18) #

0.40.1 (2023-12-05) #

Bug Fixes #

0.40.0 (2023-11-16) #

0.39.4 (2023-11-02) #

0.39.3 (2023-10-18) #

0.39.2 (2023-10-13) #

0.39.1 (2023-10-06) #

0.39.0 (2023-09-25) #

0.38.0 (2023-09-05) #

0.37.0 (2023-08-18) #

0.36.0 (2023-08-18) #

0.35.0 (2023-07-31) #

Bug Fixes #

0.34.0 (2023-07-11) #

Features #

0.33.2 (2023-06-14) #

0.33.0 (2023-06-08) #

0.32.0 (2023-06-01) #

0.31.0 (2023-05-17) #

0.30.0 (2023-05-03) #

Bug Fixes #

Features #

Performance Improvements #

0.11.4 (2023-04-24) #

0.11.3 (2023-04-05) #

Performance Improvements #

0.11.2 (2023-03-22) #

Bug Fixes #

0.11.1 (2023-03-08) #

0.11.0 (2023-02-21) #

Features #

0.10.7 (2023-02-08) #

Bug Fixes #

0.10.6 (2023-01-23) #

0.10.5 (2023-01-09) #

0.10.4 (2022-12-08) #

0.10.3 (2022-11-21) #

0.10.2 (2022-11-14) #

Spectrum
Web Components