Tabs

Tabs organize content into multiple sections, allowing users to switch between views within the same context.

Usage

Code

Accessibility

Tab 1

Tab 2

Tab 3

Tab 4

Tab 5

Panel 1

Panel 2

Panel 3

Panel 4

Panel 5

<sl-tab-group style="background: var(--sl-color-tab-default-background);">
  <sl-tab >Tab 1</sl-tab>
  <sl-tab selected>Tab 2</sl-tab>
  <sl-tab disabled>Tab 3</sl-tab>
  <sl-tab>Tab 4</sl-tab>
  <sl-tab>Tab 5</sl-tab>
  <sl-tab-panel>Panel 1</sl-tab-panel>
  <sl-tab-panel>Panel 2</sl-tab-panel>
  <sl-tab-panel>Panel 3</sl-tab-panel>
  <sl-tab-panel>Panel 4</sl-tab-panel>
  <sl-tab-panel>Panel 5</sl-tab-panel>
</sl-tab-group>

Tab group API

Component has a range of properties to define the experience in different use cases.

Properties

Name	Attribute	Type	Default	Description
`activation`	`activation`	`'auto' \| 'manual' \| undefined`	`'manual'`	Determines when the contents of a tab is shown. Auto means the contents will be shown when the tab is focused. Manual means the user has to activate the tab first by clicking or using the keyboard. For backwards compatibility, the default is 'manual'.
`alignTabs`	`align-tabs`	`'start' \| 'center' \| 'end' \| 'stretch' \| undefined`	`'start'`	The alignment of tabs within the wrapper.
`vertical`	`vertical`	`boolean \| undefined`	`false`	Renders the tabs vertically instead of the default horizontal.

Events

Name	Event type	Description
`sl-tab-change`	`SlTabChangeEvent`	Emits when the tab has been selected/changed.

Slots

Name	Description
`default`	Tab panels or other tab content here.
`tabs`	The tabs to display.

CSS Properties

Name	Description
`--sl-tab-group-menu-min-inline-size`	The minimum inline size of the menu.
`--sl-tab-group-menu-max-inline-size`	The maximum inline size of the menu.

CSS Parts

Name	Description
`container`	The container for the tabs.
`wrapper`	Wraps the scroll container and menu button.
`scroller`	The scroll container of the tabs.
`tablist`	The tablist element which also contains the active tab indicator
`panels`	The container for the tab panels. Use this part to set the background color of all panels at once.

Tab panel API

Component has a range of properties to define the experience in different use cases.

Slots

Name	Description
`default`	A place for the tab panel content.

Tab API

Component has a range of properties to define the experience in different use cases.

Properties

Name	Attribute	Type	Default	Description
`disabled`	`disabled`	`boolean \| undefined`		Whether the tab item is disabled.
`href`	`href`	`string \| undefined`		When set, it will render the tab contents in a link tag. Use this when you want to render the tab contents using a router and to make the tab navigable by URL.
`selected`	`selected`	`boolean \| undefined`	`false`	Indicates if this tab is selected.

Slots

Name	Description
`default`	A place for the tab group content.
`icon`	Icon shown on the left side of the component.
`badge`	A place for badge component.
`subtitle`	Subtitle of the tab, containing additional information.

Interactive example