631 lines
20 KiB
Markdown
631 lines
20 KiB
Markdown
# Tabs
|
|
|
|
A set of layered sections of content, known as tab panels, that display one panel of content at a time.
|
|
|
|
## Import
|
|
|
|
```
|
|
Copyts
|
|
import { Tabs } from "@kobalte/core/tabs";
|
|
// or
|
|
import { Root, List, ... } from "@kobalte/core/tabs";
|
|
// or (deprecated)
|
|
import { Tabs } from "@kobalte/core";
|
|
```
|
|
|
|
```
|
|
Copyts
|
|
import { Tabs } from "@kobalte/core/tabs";
|
|
// or
|
|
import { Root, List, ... } from "@kobalte/core/tabs";
|
|
// or (deprecated)
|
|
import { Tabs } from "@kobalte/core";
|
|
```
|
|
|
|
## Features
|
|
|
|
- Follow the [WAI ARIA Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/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:** 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.
|
|
|
|
```
|
|
Copytsx
|
|
<Tabs>
|
|
<Tabs.List>
|
|
<Tabs.Trigger />
|
|
<Tabs.Indicator />
|
|
</Tabs.List>
|
|
<Tabs.Content />
|
|
</Tabs>
|
|
```
|
|
|
|
```
|
|
Copytsx
|
|
<Tabs>
|
|
<Tabs.List>
|
|
<Tabs.Trigger />
|
|
<Tabs.Indicator />
|
|
</Tabs.List>
|
|
<Tabs.Content />
|
|
</Tabs>
|
|
```
|
|
|
|
## Example
|
|
|
|
ProfileDashboardSettingsContact
|
|
|
|
Profile details
|
|
|
|
index.tsxstyle.css
|
|
|
|
```
|
|
Copytsx
|
|
import { Tabs } from "@kobalte/core/tabs";
|
|
import "./style.css";
|
|
|
|
function App() {
|
|
return (
|
|
<Tabs aria-label="Main navigation" class="tabs">
|
|
<Tabs.List class="tabs__list">
|
|
<Tabs.Trigger class="tabs__trigger" value="profile">Profile</Tabs.Trigger>
|
|
<Tabs.Trigger class="tabs__trigger" value="dashboard">Dashboard</Tabs.Trigger>
|
|
<Tabs.Trigger class="tabs__trigger" value="settings">Settings</Tabs.Trigger>
|
|
<Tabs.Trigger class="tabs__trigger" value="contact">Contact</Tabs.Trigger>
|
|
<Tabs.Indicator class="tabs__indicator" />
|
|
</Tabs.List>
|
|
<Tabs.Content class="tabs__content" value="profile">Profile details</Tabs.Content>
|
|
<Tabs.Content class="tabs__content" value="dashboard">Dashboard details</Tabs.Content>
|
|
<Tabs.Content class="tabs__content" value="settings">Settings details</Tabs.Content>
|
|
<Tabs.Content class="tabs__content" value="contact">Contact details</Tabs.Content>
|
|
</Tabs>
|
|
);
|
|
}
|
|
```
|
|
|
|
```
|
|
Copytsx
|
|
import { Tabs } from "@kobalte/core/tabs";
|
|
import "./style.css";
|
|
|
|
function App() {
|
|
return (
|
|
<Tabs aria-label="Main navigation" class="tabs">
|
|
<Tabs.List class="tabs__list">
|
|
<Tabs.Trigger class="tabs__trigger" value="profile">Profile</Tabs.Trigger>
|
|
<Tabs.Trigger class="tabs__trigger" value="dashboard">Dashboard</Tabs.Trigger>
|
|
<Tabs.Trigger class="tabs__trigger" value="settings">Settings</Tabs.Trigger>
|
|
<Tabs.Trigger class="tabs__trigger" value="contact">Contact</Tabs.Trigger>
|
|
<Tabs.Indicator class="tabs__indicator" />
|
|
</Tabs.List>
|
|
<Tabs.Content class="tabs__content" value="profile">Profile details</Tabs.Content>
|
|
<Tabs.Content class="tabs__content" value="dashboard">Dashboard details</Tabs.Content>
|
|
<Tabs.Content class="tabs__content" value="settings">Settings details</Tabs.Content>
|
|
<Tabs.Content class="tabs__content" value="contact">Contact details</Tabs.Content>
|
|
</Tabs>
|
|
);
|
|
}
|
|
```
|
|
|
|
## 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.
|
|
|
|
ProfileDashboardSettingsContact
|
|
|
|
Dashboard details
|
|
|
|
```
|
|
Copytsx
|
|
<Tabs 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>
|
|
```
|
|
|
|
```
|
|
Copytsx
|
|
<Tabs 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>
|
|
```
|
|
|
|
### 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.
|
|
|
|
ProfileDashboardSettingsContact
|
|
|
|
Settings details
|
|
|
|
Selected tab: settings
|
|
|
|
```
|
|
Copytsx
|
|
import { createSignal } from "solid-js";
|
|
|
|
function ControlledExample() {
|
|
const [selectedTab, setSelectedTab] = createSignal("settings");
|
|
|
|
return (
|
|
<>
|
|
<Tabs 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>
|
|
<p>Selected tab: {selectedTab()}</p>
|
|
</>
|
|
);
|
|
}
|
|
```
|
|
|
|
```
|
|
Copytsx
|
|
import { createSignal } from "solid-js";
|
|
|
|
function ControlledExample() {
|
|
const [selectedTab, setSelectedTab] = createSignal("settings");
|
|
|
|
return (
|
|
<>
|
|
<Tabs 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>
|
|
<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.
|
|
|
|
ProfileDashboardSettingsContact
|
|
|
|
```
|
|
Copytsx
|
|
function FocusableContentExample() {
|
|
return (
|
|
<Tabs>
|
|
<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>
|
|
);
|
|
}
|
|
```
|
|
|
|
```
|
|
Copytsx
|
|
function FocusableContentExample() {
|
|
return (
|
|
<Tabs>
|
|
<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>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Dynamic tabs
|
|
|
|
Tabs can be added/removed dynamically by using a signal and SolidJS `For`.
|
|
|
|
Add tabRemove tab
|
|
|
|
Tab 1Tab 2Tab 3
|
|
|
|
Tab body 1
|
|
|
|
```
|
|
Copytsx
|
|
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>
|
|
<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>
|
|
</>
|
|
);
|
|
}
|
|
```
|
|
|
|
```
|
|
Copytsx
|
|
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>
|
|
<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>
|
|
</>
|
|
);
|
|
}
|
|
```
|
|
|
|
### 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.
|
|
|
|
ProfileDashboardSettingsContact
|
|
|
|
Profile details
|
|
|
|
```
|
|
Copytsx
|
|
<Tabs 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>
|
|
```
|
|
|
|
```
|
|
Copytsx
|
|
<Tabs 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>
|
|
```
|
|
|
|
### 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.
|
|
|
|
ProfileDashboardSettingsContact
|
|
|
|
Profile details
|
|
|
|
```
|
|
Copytsx
|
|
<Tabs 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>
|
|
```
|
|
|
|
```
|
|
Copytsx
|
|
<Tabs 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>
|
|
```
|
|
|
|
### Disabled
|
|
|
|
All tabs can be disabled using the `disabled` prop.
|
|
|
|
ProfileDashboardSettingsContact
|
|
|
|
Profile details
|
|
|
|
```
|
|
Copytsx
|
|
<Tabs 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>
|
|
```
|
|
|
|
```
|
|
Copytsx
|
|
<Tabs 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>
|
|
```
|
|
|
|
Individual tab can be disabled using the `disabled` prop on the tab itself.
|
|
|
|
ProfileDashboardSettingsContact
|
|
|
|
Profile details
|
|
|
|
```
|
|
Copytsx
|
|
<Tabs>
|
|
<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>
|
|
```
|
|
|
|
```
|
|
Copytsx
|
|
<Tabs>
|
|
<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>
|
|
```
|
|
|
|
## API Reference
|
|
|
|
### Tabs
|
|
|
|
`Tabs` is equivalent to the `Root` import from `@kobalte/core/tabs` (and deprecated `Tabs.Root`).
|
|
|
|
| Prop | Description |
|
|
| --- | --- |
|
|
| value | `string`<br> The controlled value of the tab to activate. |
|
|
| defaultValue | `string`<br> 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`<br> Event handler called when the value changes. |
|
|
| orientation | `'horizontal' | 'vertical'`<br> The orientation of the tabs. |
|
|
| activationMode | `'automatic' | 'manual'`<br> Whether tabs are activated automatically on focus or manually. |
|
|
| disabled | `boolean`<br> 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`<br> The unique key that associates the tab with a tab panel. |
|
|
| disabled | `boolean`<br> 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`<br> The unique key that associates the tab panel with a tab. |
|
|
| forceMount | `boolean`<br> 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` | `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.<br>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. |
|
|
|
|
Previous[←Switch](https://kobalte.dev/docs/core/components/switch)Next[Text Field→](https://kobalte.dev/docs/core/components/text-field) |