base-ui-svelte
GitHub (opens in new tab)

Tabs

A set of layered sections of content that display one panel at a time.

View as Markdown

Primary (animated pill)

Overview content

Secondary (animated underline)

Account settings

API Reference

Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also accepted unless noted.

Tabs.Root

Extends div HTML attributes.

PropertyTypeDefaultDescription
valuestring | undefined—Controlled value.
defaultValuestring—Uncontrolled initial value.
onValueChange((value: string) => void) | undefined—Event handler called when the value changes.
orientationTabsOrientation'horizontal'—
childrenSnippet<[{ value: string; orientation: TabsOrientation }]>—Content rendered inside the part.
Data attributeDescription
data-orientationThe orientation of the component.

Tabs.Indicator

Extends span HTML attributes.

PropertyTypeDefaultDescription
childrenSnippet—Content rendered inside the part.
Data attributeDescription
data-orientationThe orientation of the component.

Tabs.List

Extends div HTML attributes.

PropertyTypeDefaultDescription
childrenSnippet—Content rendered inside the part.
Data attributeDescription
data-orientationThe orientation of the component.

Tabs.Panel

Extends div HTML attributes.

PropertyTypeDefaultDescription
valuestring—Controlled value.
childrenSnippet—Content rendered inside the part.
Data attributeDescription
data-orientationThe orientation of the component.
data-selectedPresent when the item is selected.

Tabs.Tab

Extends button HTML attributes.

PropertyTypeDefaultDescription
valuestring—Controlled value.
disabledbooleanfalseWhether the control ignores user interaction.
childrenSnippet<[{ selected: boolean; disabled: boolean }]>—Content rendered inside the part.
Data attributeDescription
data-disabledPresent when the part is disabled.
data-orientationThe orientation of the component.
data-selectedPresent when the item is selected.