Tabs

A component for toggling between related panels on the same page.

Workspace stats and activity.

<script lang="ts">
	import { Tabs } from '@sveltery/base/tabs';

	const tabClassName =
		'flex h-[calc(2rem+1px)] items-center justify-center bg-transparent px-2 py-0 font-inherit text-sm font-normal leading-5 break-keep whitespace-nowrap text-neutral-600 outline-none select-none hover:text-neutral-950 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-active:text-neutral-950 dark:text-neutral-300 dark:hover:text-white dark:data-active:text-white';

	const panelClassName =
		'col-start-1 row-start-1 flex w-full items-center justify-center bg-white p-4 text-center text-sm text-neutral-950 outline-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:bg-neutral-950 dark:text-white [[hidden]]:hidden';
</script>

<Tabs.Root class="w-full max-w-xs" value="overview">
	<Tabs.List class="relative z-1 -mb-px flex gap-1">
		<Tabs.Tab class={tabClassName} value="overview">Overview</Tabs.Tab>
		<Tabs.Tab class={tabClassName} value="projects">Projects</Tabs.Tab>
		<Tabs.Tab class={tabClassName} value="account">Account</Tabs.Tab>
		<Tabs.Indicator
			class="absolute top-0 left-0 -z-1 h-full w-(--active-tab-width) translate-x-(--active-tab-left) border-x border-t border-neutral-950 bg-white transition-[translate,width] duration-150 ease-in-out dark:border-white dark:bg-neutral-950"
		/>
	</Tabs.List>
	<div class="grid w-full min-h-32 grid-cols-1 border border-neutral-950 dark:border-white">
		<Tabs.Panel class={panelClassName} value="overview">
			<p>Workspace stats and activity.</p>
		</Tabs.Panel>
		<Tabs.Panel class={panelClassName} value="projects">
			<p>Milestones and deadlines.</p>
		</Tabs.Panel>
		<Tabs.Panel class={panelClassName} value="account">
			<p>Profile and preferences.</p>
		</Tabs.Panel>
	</div>
</Tabs.Root>

Anatomy

Import the component and assemble its parts:

Anatomy

<script lang="ts">
	import { Tabs } from '@sveltery/base/tabs';
</script>

<Tabs.Root>
	<Tabs.List>
		<Tabs.Tab />
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Panel />
</Tabs.Root>

Animate panels as they activate using the data-starting-style and data-ending-style attributes. The data-activation-direction attribute indicates which direction the newly active tab is relative to the previously active one, letting panels slide in from the correct side.

Workspace stats and activity.

<script lang="ts">
	import { Tabs } from '@sveltery/base/tabs';

	const tabClassName =
		'flex h-[calc(2rem+1px)] items-center justify-center bg-transparent px-2 py-0 font-inherit text-sm font-normal leading-5 break-keep whitespace-nowrap text-neutral-600 outline-none select-none hover:text-neutral-950 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-active:text-neutral-950 dark:text-neutral-300 dark:hover:text-white dark:data-active:text-white';

	const panelClassName =
		'col-start-1 row-start-1 flex w-full items-center justify-center p-4 text-center text-sm text-neutral-950 outline-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white [transition:opacity_175ms_ease,translate_350ms_cubic-bezier(0.22,1,0.36,1)] data-starting-style:opacity-0 data-ending-style:opacity-0 motion-safe:data-starting-style:data-[activation-direction=left]:translate-x-[-50%] motion-safe:data-starting-style:data-[activation-direction=right]:translate-x-[50%] motion-safe:data-ending-style:data-[activation-direction=left]:translate-x-[50%] motion-safe:data-ending-style:data-[activation-direction=right]:translate-x-[-50%]';
</script>

<Tabs.Root class="w-full max-w-xs" value="overview">
	<Tabs.List class="relative z-1 -mb-px flex gap-1">
		<Tabs.Tab class={tabClassName} value="overview">Overview</Tabs.Tab>
		<Tabs.Tab class={tabClassName} value="projects">Projects</Tabs.Tab>
		<Tabs.Tab class={tabClassName} value="account">Account</Tabs.Tab>
		<Tabs.Indicator
			class="absolute top-0 left-0 -z-1 h-full w-(--active-tab-width) translate-x-(--active-tab-left) border-x border-t border-neutral-950 bg-white transition-[translate,width] duration-150 ease-in-out dark:border-white dark:bg-neutral-950"
		/>
	</Tabs.List>
	<div
		class="relative grid min-h-32 w-full grid-cols-1 overflow-hidden border border-neutral-950 bg-white dark:border-white dark:bg-neutral-950"
	>
		<Tabs.Panel class={panelClassName} value="overview">
			<p>Workspace stats and activity.</p>
		</Tabs.Panel>
		<Tabs.Panel class={panelClassName} value="projects">
			<p>Milestones and deadlines.</p>
		</Tabs.Panel>
		<Tabs.Panel class={panelClassName} value="account">
			<p>Profile and preferences.</p>
		</Tabs.Panel>
	</div>
</Tabs.Root>

Links

Use the render snippet and set nativeButton={false} on <Tabs.Tab> to render tabs as anchor elements.

Tabs as links

<script lang="ts">
	import { Tabs } from '@sveltery/base/tabs';
</script>

<Tabs.Root>
	<Tabs.List>
		<Tabs.Tab nativeButton={false} value="overview">
			{#snippet render(props, state, children)}
				<a href="/overview" {...props}>{@render children?.()}</a>
			{/snippet}
			Overview
		</Tabs.Tab>
	</Tabs.List>
	<!-- ... -->
</Tabs.Root>

API reference

Root

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

value TabsValue | null 0

Name: value
Description: The selected tab value. Use bind:value to share it with the parent. A value passed without bind: holds until the parent changes it. The root moves it to the first enabled tab when the selected tab is disabled or removed. A value passed at mount is held while its tab is disabled or not yet rendered. null selects nothing.
Type: TabsValue | null
Default: 0
Binding: bind:value

orientation TabsOrientation 'horizontal'

Name: orientation
Description: Layout direction. Arrow keys follow it.
Type: TabsOrientation
Default: 'horizontal'

onValueChange function —

Name: onValueChange
Description: Called when the selected value changes. reason is none for a click or keyboard activation, initial for the first selection once the tabs mount, disabled when the selected tab becomes disabled, and missing when it is removed. cancel() stops a none change. It does not stop automatic changes.
Type: (value: TabsValue | null, eventDetails: TabsRootChangeEventDetails) => void

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: TabsRootState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host and render children.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: TabsRootState, children: Snippet | undefined]>

orientation TabsOrientation

Name: orientation
Description: Layout direction. Exposed as data-orientation.
Type: TabsOrientation

tabActivationDirection TabsActivationDirection

Name: tabActivationDirection
Description: Where the active tab sits relative to the previous one.
Type: TabsActivationDirection

data-orientation

Indicates the orientation of the tabs.

data-activation-direction

Indicates the direction of the activation (based on the previous active tab).

Attribute	Description	-
`data-orientation`	Indicates the orientation of the tabs.
`data-activation-direction`	Indicates the direction of the activation (based on the previous active tab).

List

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

activateOnFocus boolean false

Name: activateOnFocus
Description: When true, arrow keys select the tab they move to. When false, Enter or Space selects the focused tab.
Type: boolean
Default: false

loopFocus boolean true

Name: loopFocus
Description: Whether arrow keys wrap from the last tab to the first.
Type: boolean
Default: true

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: TabsListState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host and render children.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: TabsListState, children: Snippet | undefined]>

orientation TabsOrientation

Name: orientation
Description: Layout direction. Exposed as data-orientation.
Type: TabsOrientation

tabActivationDirection TabsActivationDirection

Name: tabActivationDirection
Description: Where the active tab sits relative to the previous one.
Type: TabsActivationDirection

data-orientation

Indicates the orientation of the tabs.

data-activation-direction

Indicates the direction of the activation (based on the previous active tab).

Attribute	Description	-
`data-orientation`	Indicates the orientation of the tabs.
`data-activation-direction`	Indicates the direction of the activation (based on the previous active tab).

Tab

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

value^* TabsValue —

Name: value
Description: Identifies this tab in the root value.
Type: TabsValue

disabled boolean | null false

Name: disabled
Description: Whether this tab ignores activation. A disabled tab stays focusable. Arrow keys can land on it. When value is omitted, a disabled tab is not the initial selection.
Type: boolean | null
Default: false

nativeButton boolean true

Name: nativeButton
Description: Whether the host is a native <button>. Set false when render supplies a non-button element.
Type: boolean
Default: true

onclick MouseEventHandler<HTMLElement> | null —

Name: onclick
Description: Runs before the tab's handler. Call event.preventDefault() to skip it.
Type: MouseEventHandler<HTMLElement> | null

render Snippet<[props: TabsTabHostProps, state: TabsTabState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <button>. Spread props onto the host and render children.
Type: Snippet<[props: TabsTabHostProps, state: TabsTabState, children: Snippet | undefined]>

disabled boolean

Name: disabled
Description: Whether this tab ignores activation.
Type: boolean

active boolean

Name: active
Description: Whether this tab's panel is the selected one.
Type: boolean

orientation TabsOrientation

Name: orientation
Description: Layout direction. Exposed as data-orientation.
Type: TabsOrientation

tabActivationDirection TabsActivationDirection

Name: tabActivationDirection
Description: Where the active tab sits relative to the previous one.
Type: TabsActivationDirection

data-orientation

Indicates the orientation of the tabs.

data-disabled

Present when the tab is disabled.

data-activation-direction

Indicates the direction of the activation (based on the previous active tab).

data-active

Present when the tab is active.

Attribute	Description	-
`data-orientation`	Indicates the orientation of the tabs.
`data-disabled`	Present when the tab is disabled.
`data-activation-direction`	Indicates the direction of the activation (based on the previous active tab).
`data-active`	Present when the tab is active.

Indicator

A visual indicator aligned to the active tab. Renders a <span> element.

renderBeforeHydration boolean false

Name: renderBeforeHydration
Description: Whether to render itself before hydration. This minimizes the time that the indicator isn't visible after server-side rendering.
Type: boolean
Default: false

render Snippet<[props: HTMLAttributes<HTMLSpanElement>, state: TabsIndicatorState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <span>. Spread props onto the host and render children.
Type: Snippet<[props: HTMLAttributes<HTMLSpanElement>, state: TabsIndicatorState, children: Snippet | undefined]>

activeTabPosition TabsTabPosition | null

Name: activeTabPosition
Description: Active tab edges inside the list. null when nothing is selected.
Type: TabsTabPosition | null

activeTabSize TabsTabSize | null

Name: activeTabSize
Description: Active tab size. null when nothing is selected.
Type: TabsTabSize | null

orientation TabsOrientation

Name: orientation
Description: Layout direction. Exposed as data-orientation.
Type: TabsOrientation

tabActivationDirection TabsActivationDirection

Name: tabActivationDirection
Description: Where the active tab sits relative to the previous one.
Type: TabsActivationDirection

data-orientation

Indicates the orientation of the tabs.

data-activation-direction

Indicates the direction of the activation (based on the previous active tab).

Attribute	Description	-
`data-orientation`	Indicates the orientation of the tabs.
`data-activation-direction`	Indicates the direction of the activation (based on the previous active tab).

--active-tab-bottom

Indicates the distance on the bottom side from the parent's container if the tab is active.

--active-tab-height

Indicates the height of the tab if it is active.

--active-tab-left

Indicates the distance on the left side from the parent's container if the tab is active.

--active-tab-right

Indicates the distance on the right side from the parent's container if the tab is active.

--active-tab-top

Indicates the distance on the top side from the parent's container if the tab is active.

--active-tab-width

Indicates the width of the tab if it is active.

CSS Variable	Description	-
`--active-tab-bottom`	Indicates the distance on the bottom side from the parent's container if the tab is active.
`--active-tab-height`	Indicates the height of the tab if it is active.
`--active-tab-left`	Indicates the distance on the left side from the parent's container if the tab is active.
`--active-tab-right`	Indicates the distance on the right side from the parent's container if the tab is active.
`--active-tab-top`	Indicates the distance on the top side from the parent's container if the tab is active.
`--active-tab-width`	Indicates the width of the tab if it is active.

Panel

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

value^* TabsValue —

Name: value
Description: Shown when the tab with the same value is selected.
Type: TabsValue

keepMounted boolean false

Name: keepMounted
Description: Whether to keep the panel in the DOM while it is hidden.
Type: boolean
Default: false

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: TabsPanelState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host and render children.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: TabsPanelState, children: Snippet | undefined]>

hidden boolean

Name: hidden
Description: Whether the panel is currently hidden.
Type: boolean

transitionStatus TransitionStatus

Name: transitionStatus
Description: Enter and exit motion phase.
Type: TransitionStatus

orientation TabsOrientation

Name: orientation
Description: Layout direction. Exposed as data-orientation.
Type: TabsOrientation

tabActivationDirection TabsActivationDirection

Name: tabActivationDirection
Description: Where the active tab sits relative to the previous one.
Type: TabsActivationDirection

data-orientation

Indicates the orientation of the tabs.

data-activation-direction

Indicates the direction of the activation (based on the previous active tab).

data-hidden

Present when the panel is hidden.

data-index

Indicates the index of the tab panel.

data-starting-style

Present when the panel begins animating in.

data-ending-style

Present when the panel is animating out.

Attribute	Description	-
`data-orientation`	Indicates the orientation of the tabs.
`data-activation-direction`	Indicates the direction of the activation (based on the previous active tab).
`data-hidden`	Present when the panel is hidden.
`data-index`	Indicates the index of the tab panel.
`data-starting-style`	Present when the panel begins animating in.
`data-ending-style`	Present when the panel is animating out.

Tabs

Anatomy

Examples

Animated panels

Links

API reference

Root

List

Tab

Indicator

Panel