Skip to content
On this page

Tab

A section of content within a Tabs layout.

This component can display arbitrary content via its default slot. Provided markup is wrapped inside of a <section> tag and given a unique HTML ID.

Must be used with Tabs component

This component is only meant to be used inside the default <slot> of the <Tabs> component. It cannot be used as a stand-alone component. See the Tabs documentation for more information.

Demos

Configurable example

The demo below allows for configuration of name, label, and disabled props, as well as slot content.

NameValue
Props
disabled
tabName
label
Slots
default
View
Reading direction

Usage

Props

Prop nameDescriptionTypeDefault
name(required)String name of the tab, used for programmatic selection. Each Tab inside a layout must have a unique name. This prop will also be used as the tab label if no "label" prop is provided.string
labelLabel that corresponds to this Tab in the Tabs component's header. Lengthy labels will be truncated.string''
disabledWhether or not the tab is disabled. Disabled tabs cannot be accessed via label clicks or keyboard navigation.booleanfalse

Slots

NameDescriptionBindings
defaultTab content

CSS-only version

See the Tabs page to learn how to build a CSS-only tabbed layout.