Tabs · base-ui-svelte

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

Groups the tabs and the corresponding panels. Renders a <div> element.

Props

value string —

Name: value
Description: Controlled value.
Type: string | undefined

defaultValue string 0

Name: defaultValue
Description: Uncontrolled initial value.
Type: string
Default: 0

onValueChange function —

Name: onValueChange
Description: Event handler called when the value changes.
Type: ((value: string) => void) | undefined

orientation TabsOrientation 'horizontal'

Name: orientation
Description: The component orientation (layout flow direction).
Type: TabsOrientation
Default: 'horizontal'

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[{ value: string; orientation: TabsOrientation }]>

Data attributes

Attribute	Description
`data-orientation`	Indicates the orientation of the tabs.

Tabs.Indicator

A visual indicator that can be styled to match the position of the currently active tab. Renders a <span> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-orientation`	Indicates the orientation of the tabs.

Tabs.List

Groups the individual tab buttons. Renders a <div> element.

Props

activateOnFocus boolean false

Name: activateOnFocus
Description: Activate the focused tab.
Type: boolean
Default: false

loopFocus boolean true

Name: loopFocus
Description: Loop arrow-key focus at the ends.
Type: boolean
Default: true

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-orientation`	Indicates the orientation of the tabs.

Tabs.Panel

A panel displayed when the corresponding tab is active. Renders a <div> element.

Props

value string —

Name: value
Description: Controlled value.
Type: string

keepMounted boolean false

Name: keepMounted
Description: Keep the panel in the DOM when inactive.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-orientation`	Indicates the orientation of the tabs.
`data-selected`	Present when the item is selected.

Tabs.Tab

An individual interactive tab button that toggles the corresponding panel. Renders a <button> element.

Props

value string —

Name: value
Description: Controlled value.
Type: string

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[{ selected: boolean; disabled: boolean }]>

Data attributes

Attribute	Description
`data-disabled`	Present when the tab is disabled.
`data-orientation`	Indicates the orientation of the tabs.
`data-selected`	Present when the item is selected.