Tabs

A set of layered sections of content, known as tab panels, that display one panel of content at a time.

Import

ts
import { Tabs } from "@kobalte/core";

ts
import { Tabs } from "@kobalte/core";

Features

Follow the WAI ARIA Tabs design pattern, semantically linking tabs and their associated tab panels.
Support for LTR and RTL keyboard navigation.
Support for disabled tabs.
Supports horizontal/vertical orientation.
Supports automatic/manual activation.
Focus management for tab panels without any focusable children.
Can be controlled or uncontrolled.

Anatomy

The tabs consist of:

Tabs.Root: The root container for tabs and tab contents.
Tabs.List: Contains the tabs that are aligned along the edge of the active tab content.
Tabs.Trigger: The button that activates its associated tab content.
Tabs.Indicator: The visual indicator displayed at the bottom of the tab list to indicate the selected tab.
Tabs.Content: Contains the content associated with a tab trigger.

tsx
<Tabs.Root>
	<Tabs.List>
		<Tabs.Trigger />
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Content />
</Tabs.Root>

tsx
<Tabs.Root>
	<Tabs.List>
		<Tabs.Trigger />
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Content />
</Tabs.Root>

Example

Usage

Default value

A default selected tab can be provided using the defaultValue prop, which should correspond to the value prop provided to each tab.

Dashboard details

tsx
<Tabs.Root defaultValue="dashboard">
	<Tabs.List>
		<Tabs.Trigger value="profile">Profile</Tabs.Trigger>
		<Tabs.Trigger value="dashboard">Dashboard</Tabs.Trigger>
		<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		<Tabs.Trigger value="contact">Contact</Tabs.Trigger>
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Content value="profile">Profile details</Tabs.Content>
	<Tabs.Content value="dashboard">Dashboard details</Tabs.Content>
	<Tabs.Content value="settings">Settings details</Tabs.Content>
	<Tabs.Content value="contact">Contact details</Tabs.Content>
</Tabs.Root>

tsx
<Tabs.Root defaultValue="dashboard">
	<Tabs.List>
		<Tabs.Trigger value="profile">Profile</Tabs.Trigger>
		<Tabs.Trigger value="dashboard">Dashboard</Tabs.Trigger>
		<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		<Tabs.Trigger value="contact">Contact</Tabs.Trigger>
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Content value="profile">Profile details</Tabs.Content>
	<Tabs.Content value="dashboard">Dashboard details</Tabs.Content>
	<Tabs.Content value="settings">Settings details</Tabs.Content>
	<Tabs.Content value="contact">Contact details</Tabs.Content>
</Tabs.Root>

Controlled value

Selected tab can be controlled using the value prop, paired with the onChange event. The value prop from the selected tab will be passed into the callback when the tab is selected, allowing you to update state accordingly.

Settings details

Selected tab: settings

tsx
import { createSignal } from "solid-js";
function ControlledExample() {
	const [selectedTab, setSelectedTab] = createSignal("settings");
	return (
		<>
			<Tabs.Root value={selectedTab()} onChange={setSelectedTab}>
				<Tabs.List>
					<Tabs.Trigger value="profile">Profile</Tabs.Trigger>
					<Tabs.Trigger value="dashboard">Dashboard</Tabs.Trigger>
					<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
					<Tabs.Trigger value="contact">Contact</Tabs.Trigger>
					<Tabs.Indicator />
				</Tabs.List>
				<Tabs.Content value="profile">Profile details</Tabs.Content>
				<Tabs.Content value="dashboard">Dashboard details</Tabs.Content>
				<Tabs.Content value="settings">Settings details</Tabs.Content>
				<Tabs.Content value="contact">Contact details</Tabs.Content>
			</Tabs.Root>
			<p>Selected tab: {selectedTab()}</p>
		</>
	);
}

tsx
import { createSignal } from "solid-js";
function ControlledExample() {
	const [selectedTab, setSelectedTab] = createSignal("settings");
	return (
		<>
			<Tabs.Root value={selectedTab()} onChange={setSelectedTab}>
				<Tabs.List>
					<Tabs.Trigger value="profile">Profile</Tabs.Trigger>
					<Tabs.Trigger value="dashboard">Dashboard</Tabs.Trigger>
					<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
					<Tabs.Trigger value="contact">Contact</Tabs.Trigger>
					<Tabs.Indicator />
				</Tabs.List>
				<Tabs.Content value="profile">Profile details</Tabs.Content>
				<Tabs.Content value="dashboard">Dashboard details</Tabs.Content>
				<Tabs.Content value="settings">Settings details</Tabs.Content>
				<Tabs.Content value="contact">Contact details</Tabs.Content>
			</Tabs.Root>
			<p>Selected tab: {selectedTab()}</p>
		</>
	);
}

Focusable content

When the tab content doesn't contain any focusable content, the entire content is given a tabIndex=0 so that the content can be navigated to with the keyboard.

When the tab content contains focusable content, such as an <input>, then the tabIndex is omitted because the content itself can receive focus.

This example uses the same Tabs components from above. Try navigating from the tabs to each content using the keyboard.

tsx
function FocusableContentExample() {
	return (
		<Tabs.Root>
			<Tabs.List>
				<Tabs.Trigger value="profile">Profile</Tabs.Trigger>
				<Tabs.Trigger value="dashboard">Dashboard</Tabs.Trigger>
				<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
				<Tabs.Trigger value="contact">Contact</Tabs.Trigger>
				<Tabs.Indicator />
			</Tabs.List>
			<Tabs.Content value="profile">
				<input placeholder="Change password" />
			</Tabs.Content>
			<Tabs.Content value="dashboard">Dashboard details</Tabs.Content>
			<Tabs.Content value="settings">Settings details</Tabs.Content>
			<Tabs.Content value="contact">Contact details</Tabs.Content>
		</Tabs.Root>
	);
}

tsx
function FocusableContentExample() {
	return (
		<Tabs.Root>
			<Tabs.List>
				<Tabs.Trigger value="profile">Profile</Tabs.Trigger>
				<Tabs.Trigger value="dashboard">Dashboard</Tabs.Trigger>
				<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
				<Tabs.Trigger value="contact">Contact</Tabs.Trigger>
				<Tabs.Indicator />
			</Tabs.List>
			<Tabs.Content value="profile">
				<input placeholder="Change password" />
			</Tabs.Content>
			<Tabs.Content value="dashboard">Dashboard details</Tabs.Content>
			<Tabs.Content value="settings">Settings details</Tabs.Content>
			<Tabs.Content value="contact">Contact details</Tabs.Content>
		</Tabs.Root>
	);
}

Dynamic tabs

Tabs can be added/removed dynamically by using a signal and SolidJS For.

tsx
import { createSignal } from "solid-js";
function DynamicContentExample() {
	const [tabs, setTabs] = createSignal([
		{ id: "1", title: "Tab 1", content: "Tab body 1" },
		{ id: "2", title: "Tab 2", content: "Tab body 2" },
		{ id: "3", title: "Tab 3", content: "Tab body 3" },
	]);
	const addTab = () => {
		setTabs(prev => [
			...prev,
			{
				id: String(prev.length + 1),
				title: `Tab ${prev.length + 1}`,
				content: `Tab Body ${prev.length + 1}`,
			},
		]);
	};
	const removeTab = () => {
		if (tabs().length > 1) {
			setTabs(prev => prev.slice(0, -1));
		}
	};
	return (
		<>
			<button onClick={addTab}>Add tab</button>
			<button onClick={removeTab}>Remove tab</button>
			<Tabs.Root>
				<Tabs.List>
					<For each={tabs()}>{tab => <Tabs.Trigger value={tab.id}>{tab.title}</Tabs.Trigger>}</For>
					<Tabs.Indicator />
				</Tabs.List>
				<For each={tabs()}>{tab => <Tabs.Content value={tab.id}>{tab.content}</Tabs.Content>}</For>
			</Tabs.Root>
		</>
	);
}

tsx
import { createSignal } from "solid-js";
function DynamicContentExample() {
	const [tabs, setTabs] = createSignal([
		{ id: "1", title: "Tab 1", content: "Tab body 1" },
		{ id: "2", title: "Tab 2", content: "Tab body 2" },
		{ id: "3", title: "Tab 3", content: "Tab body 3" },
	]);
	const addTab = () => {
		setTabs(prev => [
			...prev,
			{
				id: String(prev.length + 1),
				title: `Tab ${prev.length + 1}`,
				content: `Tab Body ${prev.length + 1}`,
			},
		]);
	};
	const removeTab = () => {
		if (tabs().length > 1) {
			setTabs(prev => prev.slice(0, -1));
		}
	};
	return (
		<>
			<button onClick={addTab}>Add tab</button>
			<button onClick={removeTab}>Remove tab</button>
			<Tabs.Root>
				<Tabs.List>
					<For each={tabs()}>{tab => <Tabs.Trigger value={tab.id}>{tab.title}</Tabs.Trigger>}</For>
					<Tabs.Indicator />
				</Tabs.List>
				<For each={tabs()}>{tab => <Tabs.Content value={tab.id}>{tab.content}</Tabs.Content>}</For>
			</Tabs.Root>
		</>
	);
}

Activation mode

By default, pressing the arrow keys while focus is on a Tab will switch selection to the adjacent Tab in that direction, updating the content displayed accordingly.

If you would like to prevent selection change from happening automatically you can set the activationMode prop to manual. This will prevent tab selection from changing on arrow key press, requiring a subsequent Enter or Space key press to confirm tab selection.

tsx
<Tabs.Root activationMode="manual">
	<Tabs.List>
		<Tabs.Trigger value="profile">Profile</Tabs.Trigger>
		<Tabs.Trigger value="dashboard">Dashboard</Tabs.Trigger>
		<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		<Tabs.Trigger value="contact">Contact</Tabs.Trigger>
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Content value="profile">Profile details</Tabs.Content>
	<Tabs.Content value="dashboard">Dashboard details</Tabs.Content>
	<Tabs.Content value="settings">Settings details</Tabs.Content>
	<Tabs.Content value="contact">Contact details</Tabs.Content>
</Tabs.Root>

tsx
<Tabs.Root activationMode="manual">
	<Tabs.List>
		<Tabs.Trigger value="profile">Profile</Tabs.Trigger>
		<Tabs.Trigger value="dashboard">Dashboard</Tabs.Trigger>
		<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		<Tabs.Trigger value="contact">Contact</Tabs.Trigger>
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Content value="profile">Profile details</Tabs.Content>
	<Tabs.Content value="dashboard">Dashboard details</Tabs.Content>
	<Tabs.Content value="settings">Settings details</Tabs.Content>
	<Tabs.Content value="contact">Contact details</Tabs.Content>
</Tabs.Root>

Orientation

By default, tabs are horizontally oriented. The orientation prop can be set to vertical to change this. This affects keyboard navigation. You are responsible for styling your tabs accordingly.

tsx
<Tabs.Root orientation="vertical">
	<Tabs.List>
		<Tabs.Trigger value="profile">Profile</Tabs.Trigger>
		<Tabs.Trigger value="dashboard">Dashboard</Tabs.Trigger>
		<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		<Tabs.Trigger value="contact">Contact</Tabs.Trigger>
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Content value="profile">Profile details</Tabs.Content>
	<Tabs.Content value="dashboard">Dashboard details</Tabs.Content>
	<Tabs.Content value="settings">Settings details</Tabs.Content>
	<Tabs.Content value="contact">Contact details</Tabs.Content>
</Tabs.Root>

tsx
<Tabs.Root orientation="vertical">
	<Tabs.List>
		<Tabs.Trigger value="profile">Profile</Tabs.Trigger>
		<Tabs.Trigger value="dashboard">Dashboard</Tabs.Trigger>
		<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		<Tabs.Trigger value="contact">Contact</Tabs.Trigger>
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Content value="profile">Profile details</Tabs.Content>
	<Tabs.Content value="dashboard">Dashboard details</Tabs.Content>
	<Tabs.Content value="settings">Settings details</Tabs.Content>
	<Tabs.Content value="contact">Contact details</Tabs.Content>
</Tabs.Root>

Disabled

All tabs can be disabled using the disabled prop.

tsx
<Tabs.Root disabled>
	<Tabs.List>
		<Tabs.Trigger value="profile">Profile</Tabs.Trigger>
		<Tabs.Trigger value="dashboard">Dashboard</Tabs.Trigger>
		<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		<Tabs.Trigger value="contact">Contact</Tabs.Trigger>
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Content value="profile">Profile details</Tabs.Content>
	<Tabs.Content value="dashboard">Dashboard details</Tabs.Content>
	<Tabs.Content value="settings">Settings details</Tabs.Content>
	<Tabs.Content value="contact">Contact details</Tabs.Content>
</Tabs.Root>

tsx
<Tabs.Root disabled>
	<Tabs.List>
		<Tabs.Trigger value="profile">Profile</Tabs.Trigger>
		<Tabs.Trigger value="dashboard">Dashboard</Tabs.Trigger>
		<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		<Tabs.Trigger value="contact">Contact</Tabs.Trigger>
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Content value="profile">Profile details</Tabs.Content>
	<Tabs.Content value="dashboard">Dashboard details</Tabs.Content>
	<Tabs.Content value="settings">Settings details</Tabs.Content>
	<Tabs.Content value="contact">Contact details</Tabs.Content>
</Tabs.Root>

Individual tab can be disabled using the disabled prop on the tab itself.

tsx
<Tabs.Root>
	<Tabs.List>
		<Tabs.Trigger value="profile">Profile</Tabs.Trigger>
		<Tabs.Trigger value="dashboard">Dashboard</Tabs.Trigger>
		<Tabs.Trigger value="settings" disabled>
			Settings
		</Tabs.Trigger>
		<Tabs.Trigger value="contact">Contact</Tabs.Trigger>
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Content value="profile">Profile details</Tabs.Content>
	<Tabs.Content value="dashboard">Dashboard details</Tabs.Content>
	<Tabs.Content value="settings">Settings details</Tabs.Content>
	<Tabs.Content value="contact">Contact details</Tabs.Content>
</Tabs.Root>

tsx
<Tabs.Root>
	<Tabs.List>
		<Tabs.Trigger value="profile">Profile</Tabs.Trigger>
		<Tabs.Trigger value="dashboard">Dashboard</Tabs.Trigger>
		<Tabs.Trigger value="settings" disabled>
			Settings
		</Tabs.Trigger>
		<Tabs.Trigger value="contact">Contact</Tabs.Trigger>
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Content value="profile">Profile details</Tabs.Content>
	<Tabs.Content value="dashboard">Dashboard details</Tabs.Content>
	<Tabs.Content value="settings">Settings details</Tabs.Content>
	<Tabs.Content value="contact">Contact details</Tabs.Content>
</Tabs.Root>

API Reference

Tabs.Root

Prop	Description
value	`string` The controlled value of the tab to activate.
defaultValue	`string` The value of the tab that should be active when initially rendered. Useful when you do not need to control the state.
onChange	`(value: string) => void` Event handler called when the value changes.
orientation	`'horizontal' \| 'vertical'` The orientation of the tabs.
activationMode	`'automatic' \| 'manual'` Whether tabs are activated automatically on focus or manually.
disabled	`boolean` Whether the tabs are disabled.

Data attribute	Description
data-orientation='horizontal'	Present when the separator has horizontal orientation.
data-orientation='vertical'	Present when the separator has vertical orientation.

Tabs.List, Tabs.Trigger, Tabs.Indicator and Tabs.Content share the same data-attributes.

Tabs.Trigger

Prop	Description
value	`string` The unique key that associates the tab with a tab panel.
disabled	`boolean` Whether the tab should be disabled.

Data attribute	Description
data-selected	Present when the trigger is selected.
data-disabled	Present when the trigger is disabled.
data-highlighted	Present when the trigger is highlighted.

Tabs.Content

Prop	Description
value	`string` The unique key that associates the tab panel with a tab.
forceMount	`boolean` Used to force mounting when more control is needed. Useful when controlling animation with SolidJS animation libraries.

Data attribute	Description
data-selected	Present when the associated trigger is selected.

Rendered elements

Component	Default rendered element
`Tabs.Root`	`div`
`Tabs.List`	`div`
`Tabs.Trigger`	`button`
`Tabs.Indicator`	`div`
`Tabs.Content`	`div`

Accessibility

Keyboard Interactions

Key	Description
`Tab`	When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content.
`ArrowDown`	Moves focus to the next trigger in vertical orientation and activates its associated content.
`ArrowRight`	Moves focus to the next trigger in horizontal orientation and activates its associated content.
`ArrowUp`	Moves focus to the previous trigger in vertical orientation and activates its associated content.
`ArrowLeft`	Moves focus to the previous trigger in horizontal orientation and activates its associated content.
`Home`	Moves focus to the first trigger and activates its associated content.
`End`	Moves focus to the last trigger and activates its associated content.
`Enter`	In manual mode, when a trigger is focused, moves focus to its associated content.
`Space`	In manual mode, when a trigger is focused, moves focus to its associated content.