Tabs

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.

AccountDocumentsSettings

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".

AccountDocumentsSettings

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>
);

Switch or underline?

As a rule of thumb:

• Use underline for displaying different content groups that share a common parent. It works best on views that are large and content-heavy.
• Use switch for displaying different modes that change how you view the same content. It works best for smaller viewports.

Note that the switch variant will stretch to fill its container; the underline variant will not.

Tab counts

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

AccountDocuments48Settings

Make changes to your account.

AccountDocuments48Settings

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>.

AccountDocuments48Settings

Make changes to your account.

AccountDocuments48Settings

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>.

AccountDocuments48Settings

Make changes to your account.

AccountDocuments48Settings

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

Not supported

Setting orientation="vertical" is not currently supported. Work is ticketed to design and support this prop in DS-351.

API Reference

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

activationMode

"automatic" | "manual" = "automatic"

Whether a tab is activated automatically or manually.

---

asChild

boolean

---

defaultValue

string

The value of the tab to select by default, if uncontrolled

---

dir

"ltr" | "rtl"

The direction of navigation between toolbar items.

---

onValueChange

(value: string) => void

A function called when a new tab is selected

---

orientation

"horizontal" | "vertical" = "horizontal"

The orientation the tabs are layed out. Mainly so arrow navigation is done accordingly (left & right vs. up & down)

---

theme

"light" | "dark" = "light"

Visual theme for the tab list and panels.

---

value

string

The value for the selected tab, if controlled

---

TabsList

asChild

boolean

---

loop

boolean

---

variant

"switch" | "underline" = "underline"

Visual style: underline (line under active tab) or switch (pill background).

---

TabsTrigger

value

Required

string

---

asChild

boolean

---

count

string | number

Optional count or badge text shown after the label.

---

icon

IconDefinition

Icon shown before the tab label.

---

TabsContent

value

Required

string

---

asChild

boolean

---

forceMount

true

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

---