Tabs

Switches between panels of related content in the same place, such as the sections of a record. Only one panel is visible at a time. To switch a setting instead of content, use Segmented control.

import {Tabs} from '@earendil-works/elanor-react';

export default function TabsDemo() {
  return (
    <Tabs.Root defaultValue="overview">
      <Tabs.List aria-label="Project details">
        <Tabs.Tab value="overview">Overview</Tabs.Tab>
        <Tabs.Tab value="activity">Activity</Tabs.Tab>
        <Tabs.Tab value="billing">Billing</Tabs.Tab>
        <Tabs.Indicator />
      </Tabs.List>
      <Tabs.Panel value="overview">Website redesign · 3 members · 8 open tasks</Tabs.Panel>
      <Tabs.Panel value="activity">Alex added a task: Review the homepage.</Tabs.Panel>
      <Tabs.Panel value="billing">Free plan · No payment method required</Tabs.Panel>
    </Tabs.Root>
  );
}

import {Tabs} from '@earendil-works/elanor-react';

<Tabs.Root defaultValue="overview">
  <Tabs.List aria-label="Project details">
    <Tabs.Tab value="overview">Overview</Tabs.Tab>
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Panel value="overview" />
</Tabs.Root>;

Each Tab’s value matches a Panel. Name the List with aria-label. Arrow keys move between tabs. Tabs.Indicator underlines the active tab.

To render tabs as links, pass nativeButton={false} and a link to render. Set Root’s value from the current route, and render the page in one Panel.

<Tabs.Root value={tab}>
  <Tabs.List aria-label="Project details">
    <Tabs.Tab value="overview" nativeButton={false} render={<a href="/project/overview" />}>
      Overview
    </Tabs.Tab>
    <Tabs.Tab value="activity" nativeButton={false} render={<a href="/project/activity" />}>
      Activity
    </Tabs.Tab>
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Panel value={tab}>{page}</Tabs.Panel>
</Tabs.Root>

Also accepts Base UI Tabs.Root props.

Accepts Base UI Tabs.List props.

Accepts Base UI Tabs.Tab props.

Accepts Base UI Tabs.Indicator props.

Accepts Base UI Tabs.Panel props.