Tabs

A set of layered sections of content that are displayed one at a time.

Anatomy

<Tabs>
  <TabsList>
    <TabsTrigger />
  </TabsList>
  <TabsContent />
</Tabs>

Usage

To display a set of tabs, compose <Tabs>, <TabsList>, <TabsTrigger>, and <TabsContent>. You must set matching value props for <TabsTrigger> and <TabsContent> to link them together. You will probably want to set a defaultValue on <Tabs> to initialize the default tab.

Make changes to your account.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "stylus-ui/Tabs";

export default () => (
  <Tabs defaultValue="account">
    <TabsList>
      <TabsTrigger value="account">Account</TabsTrigger>
      <TabsTrigger value="documents">Documents</TabsTrigger>
      <TabsTrigger value="settings">Settings</TabsTrigger>
    </TabsList>
    <TabsContent value="account">Make changes to your account.</TabsContent>
    <TabsContent value="documents">Access and update documents.</TabsContent>
    <TabsContent value="settings">Edit settings or contact info.</TabsContent>
  </Tabs>
);

Variants

The default variant of <TabsList> is "underline". To display tabs styled like switches, set variant to "switch".

Make changes to your account.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "stylus-ui/Tabs";

export default () => (
  <Tabs defaultValue="account">
    <TabsList variant="switch">
      <TabsTrigger value="account">Account</TabsTrigger>
      <TabsTrigger value="documents">Documents</TabsTrigger>
      <TabsTrigger value="settings">Settings</TabsTrigger>
    </TabsList>
    <TabsContent value="account">Make changes to your account.</TabsContent>
    <TabsContent value="documents">Access and update documents.</TabsContent>
    <TabsContent value="settings">Edit settings or contact info.</TabsContent>
  </Tabs>
);

Tab counts

Display counts beside a tab by passing a value to count on <TabsTrigger>.

Make changes to your account.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "stylus-ui/Tabs";

export default () => (
  <Tabs defaultValue="account">
    <div className="flex flex-col items-center gap-10">
      <div>
        <TabsList>
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="documents" count={48}>
            Documents
          </TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger>
        </TabsList>
        <TabsContent value="account">Make changes to your account.</TabsContent>
        <TabsContent value="documents">
          Access and update documents.
        </TabsContent>
        <TabsContent value="settings">
          Edit settings or contact info.
        </TabsContent>
      </div>
      <div>
        <TabsList variant="switch">
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="documents" count={48}>
            Documents
          </TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger>
        </TabsList>
        <TabsContent value="account">Make changes to your account.</TabsContent>
        <TabsContent value="documents">
          Access and update documents.
        </TabsContent>
        <TabsContent value="settings">
          Edit settings or contact info.
        </TabsContent>
      </div>
    </div>
  </Tabs>
);

Icons

Import any icons from Font Awesome and pass them to the icon prop on <TabsTrigger>.

Make changes to your account.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "stylus-ui/Tabs";
import { faUser, faFile, faSliders } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <Tabs defaultValue="account">
    <div className="flex flex-col items-center gap-10">
      <div>
        <TabsList>
          <TabsTrigger value="account" icon={faUser}>
            Account
          </TabsTrigger>
          <TabsTrigger value="documents" icon={faFile} count={48}>
            Documents
          </TabsTrigger>
          <TabsTrigger value="settings" icon={faSliders}>
            Settings
          </TabsTrigger>
        </TabsList>
        <TabsContent value="account">Make changes to your account.</TabsContent>
        <TabsContent value="documents">
          Access and update documents.
        </TabsContent>
        <TabsContent value="settings">
          Edit settings or contact info.
        </TabsContent>
      </div>
      <div>
        <TabsList variant="switch">
          <TabsTrigger value="account" icon={faUser}>
            Account
          </TabsTrigger>
          <TabsTrigger value="documents" icon={faFile} count={48}>
            Documents
          </TabsTrigger>
          <TabsTrigger value="settings" icon={faSliders}>
            Settings
          </TabsTrigger>
        </TabsList>
        <TabsContent value="account">Make changes to your account.</TabsContent>
        <TabsContent value="documents">
          Access and update documents.
        </TabsContent>
        <TabsContent value="settings">
          Edit settings or contact info.
        </TabsContent>
      </div>
    </div>
  </Tabs>
);

Disabled

Individual tabs can be disabled by setting disabled on <TabsTrigger>.

Make changes to your account.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "stylus-ui/Tabs";
import { faUser, faFile, faSliders } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <Tabs defaultValue="account">
    <div className="flex flex-col items-center gap-10">
      <div>
        <TabsList>
          <TabsTrigger value="account" icon={faUser}>
            Account
          </TabsTrigger>
          <TabsTrigger value="documents" icon={faFile} count={48} disabled>
            Documents
          </TabsTrigger>
          <TabsTrigger value="settings" icon={faSliders}>
            Settings
          </TabsTrigger>
        </TabsList>
        <TabsContent value="account">Make changes to your account.</TabsContent>
        <TabsContent value="documents">
          Access and update documents.
        </TabsContent>
        <TabsContent value="settings">
          Edit settings or contact info.
        </TabsContent>
      </div>
      <div>
        <TabsList variant="switch">
          <TabsTrigger value="account" icon={faUser}>
            Account
          </TabsTrigger>
          <TabsTrigger value="documents" icon={faFile} count={48} disabled>
            Documents
          </TabsTrigger>
          <TabsTrigger value="settings" icon={faSliders}>
            Settings
          </TabsTrigger>
        </TabsList>
        <TabsContent value="account">Make changes to your account.</TabsContent>
        <TabsContent value="documents">
          Access and update documents.
        </TabsContent>
        <TabsContent value="settings">
          Edit settings or contact info.
        </TabsContent>
      </div>
    </div>
  </Tabs>
);

Orientation

API Reference

`Tabs`

Contains all the tabs component parts.

Inherits properties from HTMLElement.

Prop	Type	Default
`activationMode`	`"automatic""manual"`
`asChild`	`boolean`	`false`
`defaultValue`	`string`
`onValueChange`	`(value: string) => void`
`orientation`	`"horizontal""vertical"`	`"horizontal"`
`value`	`string`

`TabsList`

Contains the triggers that are aligned along the edge of the active content.

Inherits properties from HTMLElement.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`
`loop`	`boolean`	`true`
`variant`	`"underline""switch"`	`"underline"`

`TabsTrigger`

The button that activates its associated content.

Inherits properties from HTMLButtonElement.

Prop	Type	Default
`value`	`string`
`asChild`	`boolean`	`false`
`count`	`numberstring`
`disabled`	`boolean`	`false`
`icon`	`IconDefinition`

`TabsContent`

Contains the content associated with each trigger.

Inherits properties from HTMLElement.

Prop	Type	Default
`value`	`string`
`asChild`	`boolean`	`false`
`className`	`string`
`forceMount`	`boolean`