Components
Navigation
Tabs

Tabs

Tabs organize content into multiple sections and allow users to navigate between them

Aria docs Report an issue Edit this page

Overview

Usage

Settings

Overview content

basic.tsx

<Tabs>
  <TabList>
    <Tab id="overview">Overview</Tab>
    <Tab id="usage">Usage</Tab>
    <Tab id="settings">Settings</Tab>
  </TabList>
  <TabPanel id="overview">Overview content</TabPanel>
  <TabPanel id="usage">Usage content</TabPanel>
  <TabPanel id="settings">Settings content</TabPanel>
</Tabs>

Installation

npm

pnpm

yarn

bun

npx dotui-cli@latest add tabs

Controlled

Use the selectedKey and onSelectionChange props to control the selected tab.

Overview

Usage

Settings

Overview content

Selected tab: overview

controlled.tsx

const [selectedTab, setSelectedTab] = React.useState<Key>("overview");
return (
  <Tabs selectedKey={selectedTab} onSelectionChange={setSelectedTab}>
    <TabList>
      <Tab id="overview">Overview</Tab>
      <Tab id="usage">Usage</Tab>
      <Tab id="settings">Settings</Tab>
    </TabList>
    <TabPanel id="overview">Overview content</TabPanel>
    <TabPanel id="usage">Usage content</TabPanel>
    <TabPanel id="settings">Settings content</TabPanel>
  </Tabs>
)

Options

Variant

Use the variant prop to set the visual style of the tabs.

Overview

Usage

Settings

Overview content

variant.tsx

<Tabs variant="solid">
  <TabList>
    <Tab id="overview">Overview</Tab>
    <Tab id="usage">Usage</Tab>
    <Tab id="settings">Settings</Tab>
  </TabList>
  <TabPanel id="overview">Overview content</TabPanel>
  <TabPanel id="usage">Usage content</TabPanel>
  <TabPanel id="settings">Settings content</TabPanel>
</Tabs>

Orientation

Use the orientation prop to set the orientation of the tabs.

Overview

Usage

Settings

Overview content

vertical.tsx

<Tabs orientation="vertical">
  <TabList>
    <Tab id="overview">Overview</Tab>
    <Tab id="usage">Usage</Tab>
    <Tab id="settings">Settings</Tab>
  </TabList>
  <TabPanel id="overview">Overview content</TabPanel>
  <TabPanel id="usage">Usage content</TabPanel>
  <TabPanel id="settings">Settings content</TabPanel>
</Tabs>

Disabled

Use the isDisabled prop on Tabs or Tab to disable the entire tab list or individual tabs.

Overview

Usage

Settings

Overview content

Overview

Usage

Settings

Overview content

disabled.tsx

<Tabs isDisabled> {/* All tabs disabled */}
  <TabList>
    <Tab id="overview">Overview</Tab>
    <Tab id="usage">Usage</Tab>
    <Tab id="settings">Settings</Tab>
  </TabList>
  <TabPanel id="overview">Overview content</TabPanel>
  <TabPanel id="usage">Usage content</TabPanel>
  <TabPanel id="settings">Settings content</TabPanel>
</Tabs>

<Tabs>
  <TabList>
    <Tab id="overview">Overview</Tab>
    <Tab id="usage">Usage</Tab>
    <Tab id="settings" isDisabled>Settings</Tab> {/* Individual tab disabled */}
  </TabList>
  <TabPanel id="overview">Overview content</TabPanel>
  <TabPanel id="usage">Usage content</TabPanel>
  <TabPanel id="settings">Settings content</TabPanel>
</Tabs>

Keyboard activation

Prevent keyboard activation of tabs by setting keyboardActivation prop to 'manual'.

Overview

Usage

Settings

Overview content

keyboard-activation.tsx

<Tabs keyboardActivation="manual">
  <TabList>
    <Tab id="overview">Overview</Tab>
    <Tab id="usage">Usage</Tab>
    <Tab id="settings">Settings</Tab>
  </TabList>
  <TabPanel id="overview">Overview content</TabPanel>
  <TabPanel id="usage">Usage content</TabPanel>
  <TabPanel id="settings">Settings content</TabPanel>
</Tabs>

API Reference

Tabs

Prop	Type	Default	Description
`variant`	`'solid' \| 'underline'`	`'underline'`	The visual style of the tabs.
`isDisabled`	`boolean`	-	Whether the TabList is disabled. Shows that a selection exists, but is not available in that circumstance.
`disabledKeys`	`Iterable<Key>`	-	The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
`selectedKey`	`Key \| null`	-	The currently selected key in the collection (controlled).
`defaultSelectedKey`	`Key`	-	The initial selected key in the collection (uncontrolled).
`keyboardActivation`	`'automatic' \| 'manual'`	`'automatic`	Whether tabs are activated automatically on focus or manually.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal`	The orientation of the tabs.
`children`	`ReactNode \| (values: TabsRenderProps & {defaultChildren: ReactNode \| undefined}) => ReactNode`	-	The children of the component. A function may be provided to alter the children based on component state.
`className`	`string \| (values: TabsRenderProps & {defaultClassName: string \| undefined}) => string`	-	The CSS className for the element. A function may be provided to compute the style based on component state.
`style`	`CSSProperties \| (values: TabsRenderProps & {defaultStyle: CSSProperties}) => CSSProperties`	-	The inline style for the element. A function may be provided to compute the style based on component state.

Event	Type	Description
`onSelectionChange`	`(key: Key) => void`	Handler that is called when the selection changes.

Data attribute	Description
`[data-orientation="horizontal \| vertical"]`	The orientation of the tabs.

TabList

Prop	Type	Default	Description
`dependencies`	`any[]`	-	Values that should invalidate the item cache when using dynamic collections.
`items`	`Iterable<T>`	-	Item objects in the collection.
`children`	`ReactNode \| (values: TabListRenderProps & {defaultChildren: ReactNode \| undefined}) => ReactNode`	-	The children of the component. A function may be provided to alter the children based on component state.
`className`	`string`	-	The CSS className for the element.
`style`	`CSSProperties \| (values: TabListRenderProps & {defaultStyle: CSSProperties}) => CSSProperties`	-	The inline style for the element. A function may be provided to compute the style based on component state.

Data attribute	Description
`[data-orientation="horizontal \| vertical"]`	The orientation of the tabs.

Tab

Prop	Type	Default	Description
`id`	`Key`	-	The unique id of the tab.
`isDisabled`	`boolean`	-	Whether the tab is disabled.
`href`	`Href`	-	A URL to link to.
`hrefLang`	`string`	-	Hints at the human language of the linked URL.
`target`	`HTMLAttributeAnchorTarget`	-	The target window for the link.
`rel`	`string`	-	The relationship between the linked resource and the current page.
`download`	`boolean \| string`	-	Causes the browser to download the linked URL. A string may be provided to suggest a file name.
`ping`	`string`	-	A space-separated list of URLs to ping when the link is followed.
`referrerPolicy`	`HTMLAttributeReferrerPolicy`	-	How much of the referrer to send when following the link.
`routerOptions`	`RouterOptions`	-	Options for the configured client side router.
`children`	`ReactNode \| (values: TabRenderProps & {defaultChildren: ReactNode \| undefined}) => ReactNode`	-	The children of the component. A function may be provided to alter the children based on component state.
`className`	`string`	-	The CSS className for the element.
`style`	`CSSProperties \| (values: TabRenderProps & {defaultStyle: CSSProperties}) => CSSProperties`	-	The inline style for the element. A function may be provided to compute the style based on component state.

Data attribute	Description
`[data-hovered]`	Whether the tab is currently hovered with a mouse.
`[data-pressed]`	Whether the tab is currently in a pressed state.
`[data-selected]`	Whether the tab is currently selected.
`[data-focused]`	Whether the tab is focused, either via a mouse or keyboard.
`[data-focus-visible]`	Whether the tab is keyboard focused.
`[data-disabled]`	Whether the tab is disabled.

TabPanel

Prop	Type	Default	Description
`shouldForceMount`	`boolean`	`false`	Whether to mount the tab panel in the DOM even when it is not currently selected. Inactive tab panels are inert and cannot be interacted with. They must be styled appropriately so this is clear to the user visually.
`children`	`ReactNode \| (values: TabPanelRenderProps & {defaultChildren: ReactNode \| undefined}) => ReactNode`	-	The children of the component. A function may be provided to alter the children based on component state.
`className`	`string`	-	The CSS className for the element.
`style`	`CSSProperties \| (values: TabPanelRenderProps & {defaultStyle: CSSProperties}) => CSSProperties`	-	The inline style for the element. A function may be provided to compute the style based on component state.

Data attribute	Description
`[data-focused]`	Whether the tab panel is focused, either via a mouse or keyboard.
`[data-focus-visible]`	Whether the tab panel is keyboard focused.
`[data-inert]`	Whether the tab panel is currently non-interactive. This occurs when the shouldForceMount prop is true, and the corresponding tab is not selected.

Accessibility

Keyboard interactions

Key	Description
`Tab`	Moves focus into the tabs component and places focus on the selected tab item. If the tabs component is already in focus, moves focus to the next element in the page tab sequence.
`ArrowRight` `ArrowDown`	Moves focus to the next tab item. If focus is on the last tab item, moves focus to the first tab item.
`ArrowLeft` `ArrowUp`	Moves focus to the previous tab item. If focus is on the first tab item, moves focus to the last tab item.
`Space` `Enter`	Activates the tab item in focus.

Last updated on 10/11/2024

Table Breadcrumbs

Installation Controlled Options Variant Orientation Disabled Keyboard activation API Reference Tabs TabList Tab TabPanel Accessibility Keyboard interactions

dotUI

Bringing singularity to the web.

Product

Community

Support

Built by mehdibha. The source code is available on GitHub.

Buttons

Forms and inputs

Menus and selection

Date and time

Colors

Drag and drop

Feedback

Data display

Navigation

Overlays

Tabs

Installation

Controlled

Options

Variant

Orientation

Disabled

Keyboard activation

API Reference

Tabs

TabList

Tab

TabPanel

Accessibility

Keyboard interactions

Product

Community

Support