Anex UI logoAnex UI
npm install anexui
Documentation

Documentation

Tabs

A tabbed interface with roving tabindex keyboard navigation and two visual variants.

Preview

Overview content

Usage

import { Tabs, TabList, Tab, TabPanel } from "anexui";

<Tabs defaultActiveId="overview">
  <TabList>
    <Tab id="overview">Overview</Tab>
    <Tab id="usage">Usage</Tab>
    <Tab id="api">API</Tab>
  </TabList>
  <TabPanel id="overview">Overview content</TabPanel>
  <TabPanel id="usage">Usage content</TabPanel>
  <TabPanel id="api">API content</TabPanel>
</Tabs>
Copy code

Variants

<Tabs defaultActiveId="a" variant="line">…</Tabs>
<Tabs defaultActiveId="a" variant="pill">…</Tabs>
Copy code

Controlled

import { useState } from "react";
import { Tabs, TabList, Tab, TabPanel } from "anexui";

function Example() {
  const [active, setActive] = useState("a");
  return (
    <Tabs activeId={active} onChange={setActive}>
      <TabList>
        <Tab id="a">Tab A</Tab>
        <Tab id="b">Tab B</Tab>
      </TabList>
      <TabPanel id="a">Content A</TabPanel>
      <TabPanel id="b">Content B</TabPanel>
    </Tabs>
  );
}
Copy code

Disabled tab

<Tab id="locked" disabled>Locked</Tab>
Copy code

Tabs Props

| Prop | Type | Default | Description | |---|---|---|---| | defaultActiveId | string | — | Initially active tab id (uncontrolled) | | activeId | string | — | Active tab id (controlled) | | onChange | (id: string) => void | — | Called when the active tab changes | | variant | "line" \| "pill" | "line" | Visual style |

Tab Props

| Prop | Type | Default | Description | |---|---|---|---| | id | string | — | Required. Must match the corresponding TabPanel id | | disabled | boolean | false | Disables this tab |

Accessibility