Tabs

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

Workspace stats and activity.

import { Tabs } from '@ontoui/react';

<Tabs.Root defaultValue="overview">
  <Tabs.List>
    <Tabs.Tab value="overview">Overview</Tabs.Tab>
    <Tabs.Tab value="projects">Projects</Tabs.Tab>
    <Tabs.Tab value="account">Account</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="overview">Workspace stats and activity.</Tabs.Panel>
  <Tabs.Panel value="projects">All your active projects.</Tabs.Panel>
  <Tabs.Panel value="account">Profile and billing settings.</Tabs.Panel>
</Tabs.Root>;

Anatomy

Part	Element	Description
`Tabs.Root`	`<div>`	Groups the tabs and the corresponding panels.
`Tabs.List`	`<div>`	Groups the individual tab buttons.
`Tabs.Tab`	`<button>`	An interactive tab button that toggles a panel.
`Tabs.Panel`	`<div>`	A panel displayed when its tab is active.

Examples

Vertical

Set orientation="vertical" on Tabs.Root to arrange tabs along the side.

Workspace stats and activity.

<Tabs.Root defaultValue="overview" orientation="vertical">
  <Tabs.List>
    <Tabs.Tab value="overview">Overview</Tabs.Tab>
    <Tabs.Tab value="projects">Projects</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="overview">Overview content.</Tabs.Panel>
  <Tabs.Panel value="projects">Projects content.</Tabs.Panel>
</Tabs.Root>

Disabled tab

Set disabled on a Tabs.Tab to prevent interaction with that tab.

Workspace stats and activity.

<Tabs.Tab value="projects" disabled>
  Projects
</Tabs.Tab>

API Reference

`Tabs.Root`

Prop	Type	Default
`children?`	`ReactNode`	—
`className?`	`string`	—
`defaultValue?`	`string \| number`	—
`value?`	`string \| number`	—
`orientation?`	`"horizontal" \| "vertical"`	—
`onValueChange?`	`(value: string \| number) => void`	—

`Tabs.List`

Prop	Type	Default
`children?`	`ReactNode`	—
`className?`	`string`	—
`ref?`	`Ref<HTMLDivElement>`	—

`Tabs.Tab`

Prop	Type	Default
`children?`	`ReactNode`	—
`className?`	`string`	—
`value`	`string \| number`	—
`disabled?`	`boolean`	—
`ref?`	`Ref<HTMLDivElement>`	—

`Tabs.Panel`

Prop	Type	Default
`children?`	`ReactNode`	—
`className?`	`string`	—
`value`	`string \| number`	—
`ref?`	`Ref<HTMLDivElement>`	—