Headless Kit v0.2.2
DISCLAIMER: This component is in
Beta
status. That means that it is ready for production, but the API might change.

Tabs

Explore and switch between different views using tabs

Danish Composers

Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) ...

Building blocks

The full version

The short version

Vertical

by default, the tabs are horizontal, but you can adjust the underlying behavior to be vertical by setting the vertical prop to true.

Danish Composers

Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) ...

Disabled

You can disable a tab by setting the disabled prop to true.

Dad jokes

"What's brown and sticky", " A stick."

Behavior

Automatic

The default behavior of the tabs is manual, which means that the tabs will automatically switch to the next tab when the user hovers over the tab. You can change this behavior by setting the behavior prop to automatic.

Danish Composers

(Hover over the tabs)

Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) ...

Manual

You can set the behavior to manual, which means that the tabs will not automatically switch to the next tab when the user presses the right arrow key, and to the previous tab when the user presses the left arrow key.

Danish Composers

(Hover over the tabs - they should not be selected)

Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) ...

Dynamic

Dynamic Tab 1 Panel

onSelectedIndexChange$

You can listen to changes in the selected index by subscribing to the onSelectedIndexChange$ store.

Danish Composers

Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) ...

Selected Index: 0

bind:selectedIndex

You can provide a signal for the selected index with the bind:selectedIndex={yourSignal} and it will be used directly. This is a more efficient version of onSelectedIndexChange$.

bind:selectedTabId

You can provide a signal for the selected tab id with the bind:selectedTabId={yourSignal} and it will be used directly.

💡 You can manually set the tabId prop on each tab to be able to select any tab by its ID.

Danish Composers

Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) ...

Selected Tab Id: Maria

Add a "selected" prop

You can add a "selected" prop to the Tab component to make it selected by default.

Danish Composers

Carl Joachim Andersen (29 April 1847 - 7 May 1909) ...

onClick$

You can pass a custom onClick$ handler.

Danish Composers

(Hover over the tabs - they should not be selected)

Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) ...

Creating reusable Tabs

In order to remove the need for a linking value prop for each Tab and TabPanel pair, we have chosen to create the Tabs component as an inline component.

By consequence, the Tabs component needs to be aware of its children. If you want to create your custom reusable TabList/Tab/TabPanel components, you will have to pass them to the Tabs component through its TabList, Tab, and TabPanel props:

const CustomTabs = (props: TabsProps) => (
  <Tabs {...props} TabList={CustomTabList} Tab={CustomTab} TabPanel={CustomTabPanel} />
);

Description:

Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) ...

Accessibility

Keyboard interaction

Key

Description

Tab
Moves focus to the selected panel.
Shift + Tab
Moves focus to the selected tab.
ArrowRight
Moves focus to the next tab.
ArrowLeft
Moves focus to the previous tab.
ArrowDown
In "vertical mode", moves focus to the next tab.
ArrowUp
In "vertical mode", moves focus to the previous tab.
Home
Moves focus to the first tab.
PageUp
Moves focus to the first tab.
End
Moves focus to the last tab.
PageDown
Moves focus to the first tab.

API

Tabs

PropTypeDescription
behavior
string

Toggle between automatic or manual. The automatic behavior moves between tabs when hover. The manual behavior moves between tabs on click.

selectedIndex
number

A way to set the selected index programmatically

selectedTabId
number

A way to set the selected tabId programmatically. The tabId is set by the `key` prop of the Tab or TabPanel

vertical
boolean

If set to true, the behavior of UpArrow and DownArrow will navigate between tabs vertically instead of horizontally.

onSelectedIndexChange$
function

An event hook that gets notified whenever the selected index changes

onSelectedTabIdChange$
function

An event hook that gets notified whenever the selected tabId changes

bind:selectedIndex
signal

A signal that binds the selected index. This is a more efficient version of `selectedIndex` + `onSelectedIndexChange$`

bind:selectedTabId
signal

A signal that binds the selected tabId. This is a more efficient version of `selectedTabId` + `onSelectedTabIdChange$`

tabClass
string

The class name to apply to tabs

panelClass
string

The class name to apply to panels

Tab

PropTypeDescription
selectedClassName
string

The class name to apply when the tab is selected

selected
boolean

Select this tab by default

disabled
boolean

Set the disabled state of a specific tab

tabId
string

Set the tab id, can be used with `bind:selectedTabId` to select a tab programmatically

TabPanel

PropTypeDescription
label
element

Shorthand for `<Tab>{label}</Tab>`

selected
boolean

Select this tab by default