Overlays

Tabs

Tabs — `Tabs`, `Tabs.List`, `Tabs.Tab`, `Tabs.Panels`, `Tabs.Panel`.

Client component5 exportsSource

Import

import { Tabs, TabsList, TabsPanel, TabsPanels, TabsTab } from '@the_viveksingh/vivek-ui'

Automatic vs manual activation

automatic selects a tab as arrow keys move focus; manual moves focus only and waits for Enter or Space. Both are in the ARIA spec, and which one is right depends on how expensive showing a panel is.

Account settings. Arrow keys move between tabs; Tab moves into the panel.

<Tabs defaultValue="account">
  <Tabs.List>
    <Tabs.Tab value="account">Account</Tabs.Tab>
    <Tabs.Tab value="billing">Billing</Tabs.Tab>
    <Tabs.Tab value="team" disabled>Team</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panels>
    <Tabs.Panel value="account">Account settings.</Tabs.Panel>
    <Tabs.Panel value="billing">Billing settings.</Tabs.Panel>
    <Tabs.Panel value="team">Team settings.</Tabs.Panel>
  </Tabs.Panels>
</Tabs>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Tabs
PropTypeDefaultDescription
valuestring—Controlled selection: the `value` of the selected tab.
defaultValuestring—Uncontrolled initial selection.
onValueChange(value: string) => void——
orientationTabsOrientation—Which arrows move between tabs, and how the widget is laid out. Default `horizontal`.
variantTabsVariant——
sizeTabsSize——
activationModeTabsActivationMode—Default `'automatic'`.
loopboolean—Wrap arrow navigation past the ends. Default `true`.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Exports

TabsTabsListTabsPanelTabsPanelsTabsTab

Rendering