Tabs

Navigate between different types of related content at the same level of hierarchy.

styleKeys: tabsscriptKeys: tabs

UsageGuidelinesAPI

Use tabs to organize and navigate between different types of related content at the same level of hierarchy, in the same viewing area on a page.

Usage

ReactVanilla

<Tabs defaultSelectedTabId="desc">
  <TabsHeaders aria-label="More Product Details">
    <TabHeader tabId="desc">Description</TabHeader>
    <TabHeader tabId="specs">Specifications</TabHeader>
  </TabsHeaders>
  <TabsContents>
    <TabContent tabId="desc">
      <p>The Quantum-Flux Smartwatch</p>
      <p>
        Experience the next generation of wearable technology with the
        Quantum-Flux Smartwatch. Crafted from aerospace-grade aluminum and
        featuring a vibrant, always-on display, this watch is both durable and
        stylish. It seamlessly integrates with all your devices to keep you
        connected, on track, and in tune with your body.
      </p>
      <p>
        Whether you're climbing a mountain or leading a board meeting, the
        Quantum-Flux is the perfect companion for a modern life.
      </p>
    </TabContent>
    <TabContent tabId="specs">
      <p>Technical Specifications</p>

      <ul>
        <li>Case Size: 44mm</li>
        <li>Display: 1.4-inch Super AMOLED (454x454)</li>

        <li>Processor: ChronoCore Z-1 Chip</li>

        <li>Battery Life: Up to 72 hours (typical use)</li>

        <li>Water Resistance: 5 ATM (up to 50 meters)</li>

        <li>Connectivity: Bluetooth 5.2, Wi-Fi, NFC, GPS</li>
      </ul>
    </TabContent>
  </TabsContents>
</Tabs>

<Tabs defaultSelectedTabId="desc">
  <TabsHeaders aria-label="More Product Details">
    <TabHeader tabId="desc">Description</TabHeader>
    <TabHeader tabId="specs">Specifications</TabHeader>
  </TabsHeaders>
  <TabsContents>
    <TabContent tabId="desc">
      <p>The Quantum-Flux Smartwatch</p>
      <p>
        Experience the next generation of wearable technology with the
        Quantum-Flux Smartwatch. Crafted from aerospace-grade aluminum and
        featuring a vibrant, always-on display, this watch is both durable and
        stylish. It seamlessly integrates with all your devices to keep you
        connected, on track, and in tune with your body.
      </p>
      <p>
        Whether you're climbing a mountain or leading a board meeting, the
        Quantum-Flux is the perfect companion for a modern life.
      </p>
    </TabContent>
    <TabContent tabId="specs">
      <p>Technical Specifications</p>

      <ul>
        <li>Case Size: 44mm</li>
        <li>Display: 1.4-inch Super AMOLED (454x454)</li>

        <li>Processor: ChronoCore Z-1 Chip</li>

        <li>Battery Life: Up to 72 hours (typical use)</li>

        <li>Water Resistance: 5 ATM (up to 50 meters)</li>

        <li>Connectivity: Bluetooth 5.2, Wi-Fi, NFC, GPS</li>
      </ul>
    </TabContent>
  </TabsContents>
</Tabs>

<div class="swan-vanilla-ignore swan-tabs">
  <div
    role="tablist"
    aria-label="More Product Details"
    class="swan-tabs-headers"
  >
    <input
      type="radio"
      role="tab"
      class=""
      checked=""
      id="auto-id-hc860inni-366"
      name="auto-id-hc860inni-372"
      aria-controls="auto-id-hc860inni-370"
    /><label class="" id="auto-id-hc860inni-367" for="auto-id-hc860inni-366"
      >Description</label
    ><input
      type="radio"
      role="tab"
      class=""
      id="auto-id-hc860inni-368"
      name="auto-id-hc860inni-372"
      aria-controls="auto-id-hc860inni-371"
    /><label class="" id="auto-id-hc860inni-369" for="auto-id-hc860inni-368"
      >Specifications</label
    >
  </div>
  <div class="swan-tabs-contents">
    <div
      role="tabpanel"
      class="swan-tab-selected"
      id="auto-id-hc860inni-370"
      aria-labelledby="auto-id-hc860inni-367"
    >
      <p>The Quantum-Flux Smartwatch</p>
      <p>
        Experience the next generation of wearable technology with the
        Quantum-Flux Smartwatch. Crafted from aerospace-grade aluminum and
        featuring a vibrant, always-on display, this watch is both durable and
        stylish. It seamlessly integrates with all your devices to keep you
        connected, on track, and in tune with your body.
      </p>
      <p>
        Whether you're climbing a mountain or leading a board meeting, the
        Quantum-Flux is the perfect companion for a modern life.
      </p>
    </div>
    <div
      role="tabpanel"
      class=""
      id="auto-id-hc860inni-371"
      aria-labelledby="auto-id-hc860inni-369"
    >
      <p>Technical Specifications</p>
      <ul>
        <li>Case Size: 44mm</li>
        <li>Display: 1.4-inch Super AMOLED (454x454)</li>
        <li>Processor: ChronoCore Z-1 Chip</li>
        <li>Battery Life: Up to 72 hours (typical use)</li>
        <li>Water Resistance: 5 ATM (up to 50 meters)</li>
        <li>Connectivity: Bluetooth 5.2, Wi-Fi, NFC, GPS</li>
      </ul>
    </div>
  </div>
</div>

<div class="swan-vanilla-ignore swan-tabs">
  <div
    role="tablist"
    aria-label="More Product Details"
    class="swan-tabs-headers"
  >
    <input
      type="radio"
      role="tab"
      class=""
      checked=""
      id="auto-id-hc860inni-366"
      name="auto-id-hc860inni-372"
      aria-controls="auto-id-hc860inni-370"
    /><label class="" id="auto-id-hc860inni-367" for="auto-id-hc860inni-366"
      >Description</label
    ><input
      type="radio"
      role="tab"
      class=""
      id="auto-id-hc860inni-368"
      name="auto-id-hc860inni-372"
      aria-controls="auto-id-hc860inni-371"
    /><label class="" id="auto-id-hc860inni-369" for="auto-id-hc860inni-368"
      >Specifications</label
    >
  </div>
  <div class="swan-tabs-contents">
    <div
      role="tabpanel"
      class="swan-tab-selected"
      id="auto-id-hc860inni-370"
      aria-labelledby="auto-id-hc860inni-367"
    >
      <p>The Quantum-Flux Smartwatch</p>
      <p>
        Experience the next generation of wearable technology with the
        Quantum-Flux Smartwatch. Crafted from aerospace-grade aluminum and
        featuring a vibrant, always-on display, this watch is both durable and
        stylish. It seamlessly integrates with all your devices to keep you
        connected, on track, and in tune with your body.
      </p>
      <p>
        Whether you're climbing a mountain or leading a board meeting, the
        Quantum-Flux is the perfect companion for a modern life.
      </p>
    </div>
    <div
      role="tabpanel"
      class=""
      id="auto-id-hc860inni-371"
      aria-labelledby="auto-id-hc860inni-369"
    >
      <p>Technical Specifications</p>
      <ul>
        <li>Case Size: 44mm</li>
        <li>Display: 1.4-inch Super AMOLED (454x454)</li>
        <li>Processor: ChronoCore Z-1 Chip</li>
        <li>Battery Life: Up to 72 hours (typical use)</li>
        <li>Water Resistance: 5 ATM (up to 50 meters)</li>
        <li>Connectivity: Bluetooth 5.2, Wi-Fi, NFC, GPS</li>
      </ul>
    </div>
  </div>
</div>

Tab headers will not line-wrap if there is not enough space to display them all. Instead, the user will be able scroll them horizontally. A slight gradient will appear at the right edge to indicate there is hidden content.

Tabs consist of two main parts:

the "headers" (the clickable "tabs" themselves)
the "contents" (the content for each tab)

React Usage

Tabs consists of TabsHeaders and TabsContents.
Inside of the TabsHeaders, we have individual TabHeader components, and inside of the TabsContents we have individual TabContent components.
Each TabHeader matches up with a single TabContent via the tabId prop. Every TabHeader and TabContent must have a tabId in order for Tabs to be able to tell which TabContent to show when a certain TabHeader is clicked.
A defaultSelectedTabId can be provided in order to specify the initially-selected tab. If you want to control the state beyond just the initial selection, check out the managing state section.

<Tabs defaultSelectedTabId="one">
  <TabsHeaders aria-label="My Tabs">
    <TabHeader tabId="one">Header 1</TabHeader>
    <TabHeader tabId="two">Header 2</TabHeader>
  </TabsHeaders>
  <TabsContents>
    <TabContent tabId="one">Content 1</TabContent>
    <TabContent tabId="two">Content 2</TabContent>
  </TabsContents>
</Tabs>

<Tabs defaultSelectedTabId="one">
  <TabsHeaders aria-label="My Tabs">
    <TabHeader tabId="one">Header 1</TabHeader>
    <TabHeader tabId="two">Header 2</TabHeader>
  </TabsHeaders>
  <TabsContents>
    <TabContent tabId="one">Content 1</TabContent>
    <TabContent tabId="two">Content 2</TabContent>
  </TabsContents>
</Tabs>

Vanilla Usage

In vanilla, Tabs headers are a series of radio buttons and labels.

The tabs-headers element that wraps the headers must have role="tablist"
Each radio button needs a value property whose value is the selector of the contents element associated with that radio button. For instance, if the contents panel has an id of exampleTab1, then the input should have value="#exampleTab1"
Each radio button also must have role="tab", and an aria-controls property whose value is the id of the tab panel that it goes with.
The radio button associated with the default tab should have the property checked="checked".
You can disable a tab by putting the disabled property onto the radio button associated with that tab. The Tabs contents are a series of divs that are associated with those radio buttons.
Each content panel must have role="tabpanel" and an aria-labelledby attributes whose value is the id of the <label> in the tabs headers that the tab panel goes with.

<div class="swan-tabs">
  <div class="swan-tabs-headers" aria-label="My Tabs" role="tablist">
    <input
      name="exampleTabHeaders"
      id="exampleTabHeader1"
      type="radio"
      value="#exampleTab1"
      checked="checked"
      role="tab"
      aria-controls="exampleTab1"
    />
    <label for="exampleTabHeader1" id="exampleTabHeader1Label">Header 1</label>
    <input
      name="exampleTabHeaders"
      id="exampleTabHeader2"
      type="radio"
      value="#exampleTab2"
      role="tab"
      aria-controls="exampleTab2"
    />
    <label for="exampleTabHeader2" id="exampleTabHeader2Label">Header 2</label>
  </div>

  <div class="swan-tabs-contents">
    <div
      id="exampleTab1"
      class="swan-tab-selected"
      role="tabpanel"
      aria-labelledby="exampleTabHeader1Label"
    >
      Content 1
    </div>
    <div
      id="exampleTab2"
      role="tabpanel"
      aria-labelledby="exampleTabHeader2Label"
    >
      > Content 2
    </div>
  </div>
</div>

<div class="swan-tabs">
  <div class="swan-tabs-headers" aria-label="My Tabs" role="tablist">
    <input
      name="exampleTabHeaders"
      id="exampleTabHeader1"
      type="radio"
      value="#exampleTab1"
      checked="checked"
      role="tab"
      aria-controls="exampleTab1"
    />
    <label for="exampleTabHeader1" id="exampleTabHeader1Label">Header 1</label>
    <input
      name="exampleTabHeaders"
      id="exampleTabHeader2"
      type="radio"
      value="#exampleTab2"
      role="tab"
      aria-controls="exampleTab2"
    />
    <label for="exampleTabHeader2" id="exampleTabHeader2Label">Header 2</label>
  </div>

  <div class="swan-tabs-contents">
    <div
      id="exampleTab1"
      class="swan-tab-selected"
      role="tabpanel"
      aria-labelledby="exampleTabHeader1Label"
    >
      Content 1
    </div>
    <div
      id="exampleTab2"
      role="tabpanel"
      aria-labelledby="exampleTabHeader2Label"
    >
      > Content 2
    </div>
  </div>
</div>

Disabled

disabled is deprecated in SWAN v3.24

Individual tabs should not be disabled, as doing so prevents users from accessing them and leaves them uncertain about the reason for their unavailability. Please remove any uses.

Use disabled on TabHeader to prevent a user from navigating to that section, when a tab's content is completely inaccessible to the user.

<Tabs defaultSelectedTabId="two">
  <TabsHeaders aria-label="My Tabs">
    <TabHeader disabled tabId="one">
      Header 1
    </TabHeader>
    <TabHeader tabId="two">Header 2</TabHeader>
  </TabsHeaders>
  <TabsContents>
    <TabContent tabId="one">Content 1</TabContent>
    <TabContent tabId="two">Content 2</TabContent>
  </TabsContents>
</Tabs>

<Tabs defaultSelectedTabId="two">
  <TabsHeaders aria-label="My Tabs">
    <TabHeader disabled tabId="one">
      Header 1
    </TabHeader>
    <TabHeader tabId="two">Header 2</TabHeader>
  </TabsHeaders>
  <TabsContents>
    <TabContent tabId="one">Content 1</TabContent>
    <TabContent tabId="two">Content 2</TabContent>
  </TabsContents>
</Tabs>

Centered Headers

Use this option if you want the headers to be centered instead of left-aligned.

ReactVanilla

<Tabs centerHeaders defaultSelectedTabId="two">
  <TabsHeaders aria-label="My Centered Tabs">
    <TabHeader tabId="one">Header 1</TabHeader>
    <TabHeader tabId="two">Header 2</TabHeader>
  </TabsHeaders>
  <TabsContents>
    <TabContent tabId="one">Content 1</TabContent>
    <TabContent tabId="two">Content 2</TabContent>
  </TabsContents>
</Tabs>

<Tabs centerHeaders defaultSelectedTabId="two">
  <TabsHeaders aria-label="My Centered Tabs">
    <TabHeader tabId="one">Header 1</TabHeader>
    <TabHeader tabId="two">Header 2</TabHeader>
  </TabsHeaders>
  <TabsContents>
    <TabContent tabId="one">Content 1</TabContent>
    <TabContent tabId="two">Content 2</TabContent>
  </TabsContents>
</Tabs>

<div class="swan-tabs swan-tabs-center-headers">
  <div role="tablist" class="swan-tabs-headers" aria-label="My Centered Tabs">
    <input
      type="radio"
      role="tab"
      id="auto-id-wdkq5ztp0-658"
      name="auto-id-wdkq5ztp0-698"
      aria-controls="auto-id-wdkq5ztp0-662"
    /><label id="auto-id-wdkq5ztp0-659" for="auto-id-wdkq5ztp0-658"
      >Header 1</label
    ><input
      type="radio"
      role="tab"
      checked=""
      id="auto-id-wdkq5ztp0-660"
      name="auto-id-wdkq5ztp0-698"
      aria-controls="auto-id-wdkq5ztp0-663"
    /><label id="auto-id-wdkq5ztp0-661" for="auto-id-wdkq5ztp0-660"
      >Header 2</label
    >
  </div>
  <div class="swan-tabs-contents">
    <div role="tabpanel" id="auto-id-wdkq5ztp0-662">Content 1</div>
    <div role="tabpanel" class="swan-tab-selected" id="auto-id-wdkq5ztp0-663">
      Content 2
    </div>
  </div>
</div>

<div class="swan-tabs swan-tabs-center-headers">
  <div role="tablist" class="swan-tabs-headers" aria-label="My Centered Tabs">
    <input
      type="radio"
      role="tab"
      id="auto-id-wdkq5ztp0-658"
      name="auto-id-wdkq5ztp0-698"
      aria-controls="auto-id-wdkq5ztp0-662"
    /><label id="auto-id-wdkq5ztp0-659" for="auto-id-wdkq5ztp0-658"
      >Header 1</label
    ><input
      type="radio"
      role="tab"
      checked=""
      id="auto-id-wdkq5ztp0-660"
      name="auto-id-wdkq5ztp0-698"
      aria-controls="auto-id-wdkq5ztp0-663"
    /><label id="auto-id-wdkq5ztp0-661" for="auto-id-wdkq5ztp0-660"
      >Header 2</label
    >
  </div>
  <div class="swan-tabs-contents">
    <div role="tabpanel" id="auto-id-wdkq5ztp0-662">Content 1</div>
    <div role="tabpanel" class="swan-tab-selected" id="auto-id-wdkq5ztp0-663">
      Content 2
    </div>
  </div>
</div>

Dividing Line

You can hide the dividing line between the tabs headers and the content of the tabs.

ReactVanilla

<Tabs showDividingLine={false} defaultSelectedTabId="one">
  <TabsHeaders aria-label="My Tabs">
    <TabHeader tabId="one">Header 1</TabHeader>
    <TabHeader tabId="two">Header 2</TabHeader>
  </TabsHeaders>
  <TabsContents>
    <TabContent tabId="one">Content 1</TabContent>
    <TabContent tabId="two">Content 2</TabContent>
  </TabsContents>
</Tabs>

<Tabs showDividingLine={false} defaultSelectedTabId="one">
  <TabsHeaders aria-label="My Tabs">
    <TabHeader tabId="one">Header 1</TabHeader>
    <TabHeader tabId="two">Header 2</TabHeader>
  </TabsHeaders>
  <TabsContents>
    <TabContent tabId="one">Content 1</TabContent>
    <TabContent tabId="two">Content 2</TabContent>
  </TabsContents>
</Tabs>

<div class="swan-tabs swan-tabs-no-dividing-line">
  <div role="tablist" class="swan-tabs-headers" aria-label="My Tabs">
    <input
      type="radio"
      role="tab"
      checked=""
      id="auto-id-wdkq5ztp0-664"
      name="auto-id-wdkq5ztp0-699"
      aria-controls="auto-id-wdkq5ztp0-668"
    /><label id="auto-id-wdkq5ztp0-665" for="auto-id-wdkq5ztp0-664"
      >Header 1</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-wdkq5ztp0-666"
      name="auto-id-wdkq5ztp0-699"
      aria-controls="auto-id-wdkq5ztp0-669"
    /><label id="auto-id-wdkq5ztp0-667" for="auto-id-wdkq5ztp0-666"
      >Header 2</label
    >
  </div>
  <div class="swan-tabs-contents">
    <div role="tabpanel" class="swan-tab-selected" id="auto-id-wdkq5ztp0-668">
      Content 1
    </div>
    <div role="tabpanel" id="auto-id-wdkq5ztp0-669">Content 2</div>
  </div>
</div>

<div class="swan-tabs swan-tabs-no-dividing-line">
  <div role="tablist" class="swan-tabs-headers" aria-label="My Tabs">
    <input
      type="radio"
      role="tab"
      checked=""
      id="auto-id-wdkq5ztp0-664"
      name="auto-id-wdkq5ztp0-699"
      aria-controls="auto-id-wdkq5ztp0-668"
    /><label id="auto-id-wdkq5ztp0-665" for="auto-id-wdkq5ztp0-664"
      >Header 1</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-wdkq5ztp0-666"
      name="auto-id-wdkq5ztp0-699"
      aria-controls="auto-id-wdkq5ztp0-669"
    /><label id="auto-id-wdkq5ztp0-667" for="auto-id-wdkq5ztp0-666"
      >Header 2</label
    >
  </div>
  <div class="swan-tabs-contents">
    <div role="tabpanel" class="swan-tab-selected" id="auto-id-wdkq5ztp0-668">
      Content 1
    </div>
    <div role="tabpanel" id="auto-id-wdkq5ztp0-669">Content 2</div>
  </div>
</div>

Sticky Headers

This option makes the headers sticky to the top of the screen if the tabs content is tall. This option will also automatically hide the dividing line between the tab headers and the tab content.

ReactVanilla

<Tabs stickyHeaders defaultSelectedTabId="one">
  <TabsHeaders aria-label="My Tabs">
    <TabHeader tabId="one">Header 1</TabHeader>
    <TabHeader tabId="two">Header 2</TabHeader>
  </TabsHeaders>
  <TabsContents>
    <TabContent tabId="one">
      {[1, 2, 3, 4, 5, 6].map(u => (
        <Box key={u} bgc="standard" py={9} px={5} my={8}>
          some content
        </Box>
      ))}
    </TabContent>
    <TabContent tabId="two">Content 2</TabContent>
  </TabsContents>
</Tabs>

<Tabs stickyHeaders defaultSelectedTabId="one">
  <TabsHeaders aria-label="My Tabs">
    <TabHeader tabId="one">Header 1</TabHeader>
    <TabHeader tabId="two">Header 2</TabHeader>
  </TabsHeaders>
  <TabsContents>
    <TabContent tabId="one">
      {[1, 2, 3, 4, 5, 6].map(u => (
        <Box key={u} bgc="standard" py={9} px={5} my={8}>
          some content
        </Box>
      ))}
    </TabContent>
    <TabContent tabId="two">Content 2</TabContent>
  </TabsContents>
</Tabs>

<div class="swan-tabs swan-tabs-sticky-headers">
  <div role="tablist" class="swan-tabs-headers" aria-label="My Tabs">
    <input
      type="radio"
      role="tab"
      checked=""
      id="auto-id-l16f4ikf0-132"
      name="auto-id-l16f4ikf0-198"
      aria-controls="auto-id-l16f4ikf0-136"
    /><label id="auto-id-l16f4ikf0-133" for="auto-id-l16f4ikf0-132"
      >Header 1</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-l16f4ikf0-134"
      name="auto-id-l16f4ikf0-198"
      aria-controls="auto-id-l16f4ikf0-137"
    /><label id="auto-id-l16f4ikf0-135" for="auto-id-l16f4ikf0-134"
      >Header 2</label
    >
  </div>
  <div class="swan-tabs-contents">
    <div
      role="tabpanel"
      id="auto-id-l16f4ikf0-136"
      aria-labelledby="auto-id-l16f4ikf0-133"
      class="swan-tab-selected"
    >
      <div class="swan-bgc-standard swan-py-9 swan-px-5 swan-my-8">
        some content
      </div>
      <div class="swan-bgc-standard swan-py-9 swan-px-5 swan-my-8">
        some content
      </div>
      <div class="swan-bgc-standard swan-py-9 swan-px-5 swan-my-8">
        some content
      </div>
      <div class="swan-bgc-standard swan-py-9 swan-px-5 swan-my-8">
        some content
      </div>
      <div class="swan-bgc-standard swan-py-9 swan-px-5 swan-my-8">
        some content
      </div>
      <div class="swan-bgc-standard swan-py-9 swan-px-5 swan-my-8">
        some content
      </div>
    </div>
    <div
      role="tabpanel"
      id="auto-id-l16f4ikf0-137"
      aria-labelledby="auto-id-l16f4ikf0-135"
    >
      Content 2
    </div>
  </div>
</div>

<div class="swan-tabs swan-tabs-sticky-headers">
  <div role="tablist" class="swan-tabs-headers" aria-label="My Tabs">
    <input
      type="radio"
      role="tab"
      checked=""
      id="auto-id-l16f4ikf0-132"
      name="auto-id-l16f4ikf0-198"
      aria-controls="auto-id-l16f4ikf0-136"
    /><label id="auto-id-l16f4ikf0-133" for="auto-id-l16f4ikf0-132"
      >Header 1</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-l16f4ikf0-134"
      name="auto-id-l16f4ikf0-198"
      aria-controls="auto-id-l16f4ikf0-137"
    /><label id="auto-id-l16f4ikf0-135" for="auto-id-l16f4ikf0-134"
      >Header 2</label
    >
  </div>
  <div class="swan-tabs-contents">
    <div
      role="tabpanel"
      id="auto-id-l16f4ikf0-136"
      aria-labelledby="auto-id-l16f4ikf0-133"
      class="swan-tab-selected"
    >
      <div class="swan-bgc-standard swan-py-9 swan-px-5 swan-my-8">
        some content
      </div>
      <div class="swan-bgc-standard swan-py-9 swan-px-5 swan-my-8">
        some content
      </div>
      <div class="swan-bgc-standard swan-py-9 swan-px-5 swan-my-8">
        some content
      </div>
      <div class="swan-bgc-standard swan-py-9 swan-px-5 swan-my-8">
        some content
      </div>
      <div class="swan-bgc-standard swan-py-9 swan-px-5 swan-my-8">
        some content
      </div>
      <div class="swan-bgc-standard swan-py-9 swan-px-5 swan-my-8">
        some content
      </div>
    </div>
    <div
      role="tabpanel"
      id="auto-id-l16f4ikf0-137"
      aria-labelledby="auto-id-l16f4ikf0-135"
    >
      Content 2
    </div>
  </div>
</div>

With Icons

To add Icons to the headers you can add them directly to the TabHeader.

ReactVanilla

<Tabs defaultSelectedTabId="one">
  <TabsHeaders aria-label="My Tabs with Icons">
    <TabHeader tabId="one">
      <Icon iconType="upload" />
      Header 1
    </TabHeader>
    <TabHeader tabId="two">
      <Icon iconType="upload" />
      Header 2
    </TabHeader>
    <TabHeader tabId="three">
      <Icon iconType="upload" />
      Header 3 is much longer
    </TabHeader>
    <TabHeader tabId="four" disabled>
      <Icon iconType="upload" />
      Header 4
    </TabHeader>
  </TabsHeaders>
  <TabsContents>
    <TabContent tabId="one">Content 1</TabContent>
    <TabContent tabId="two">Content 2</TabContent>
    <TabContent tabId="three">Content 3</TabContent>
    <TabContent tabId="four">Content 4</TabContent>
  </TabsContents>
</Tabs>

<Tabs defaultSelectedTabId="one">
  <TabsHeaders aria-label="My Tabs with Icons">
    <TabHeader tabId="one">
      <Icon iconType="upload" />
      Header 1
    </TabHeader>
    <TabHeader tabId="two">
      <Icon iconType="upload" />
      Header 2
    </TabHeader>
    <TabHeader tabId="three">
      <Icon iconType="upload" />
      Header 3 is much longer
    </TabHeader>
    <TabHeader tabId="four" disabled>
      <Icon iconType="upload" />
      Header 4
    </TabHeader>
  </TabsHeaders>
  <TabsContents>
    <TabContent tabId="one">Content 1</TabContent>
    <TabContent tabId="two">Content 2</TabContent>
    <TabContent tabId="three">Content 3</TabContent>
    <TabContent tabId="four">Content 4</TabContent>
  </TabsContents>
</Tabs>

<div class="swan-vanilla-ignore swan-tabs">
  <div role="tablist" class="swan-tabs-headers" aria-label="My Tabs with Icons">
    <input
      type="radio"
      role="tab"
      checked=""
      id="auto-id-wv92o67cf-14"
      name="auto-id-wv92o67cf-26"
      aria-controls="auto-id-wv92o67cf-22"
    /><label id="auto-id-wv92o67cf-15" for="auto-id-wv92o67cf-14"
      ><img
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        alt=""
        class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-upload"
        style='mask-image: url("/builds/main/v3/icons/upload.f828fbaa5cab5380b5b8cb16ff60c6f2.svg");'
      />Header 1</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-wv92o67cf-16"
      name="auto-id-wv92o67cf-26"
      aria-controls="auto-id-wv92o67cf-23"
    /><label id="auto-id-wv92o67cf-17" for="auto-id-wv92o67cf-16"
      ><img
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        alt=""
        class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-upload"
        style='mask-image: url("/builds/main/v3/icons/upload.f828fbaa5cab5380b5b8cb16ff60c6f2.svg");'
      />Header 2</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-wv92o67cf-18"
      name="auto-id-wv92o67cf-26"
      aria-controls="auto-id-wv92o67cf-24"
    /><label id="auto-id-wv92o67cf-19" for="auto-id-wv92o67cf-18"
      ><img
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        alt=""
        class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-upload"
        style='mask-image: url("/builds/main/v3/icons/upload.f828fbaa5cab5380b5b8cb16ff60c6f2.svg");'
      />Header 3 is much longer</label
    ><input
      disabled=""
      type="radio"
      role="tab"
      id="auto-id-wv92o67cf-20"
      name="auto-id-wv92o67cf-26"
      aria-controls="auto-id-wv92o67cf-25"
    /><label id="auto-id-wv92o67cf-21" for="auto-id-wv92o67cf-20"
      ><img
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        alt=""
        class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-upload"
        style='mask-image: url("/builds/main/v3/icons/upload.f828fbaa5cab5380b5b8cb16ff60c6f2.svg");'
      />Header 4</label
    >
  </div>
  <div class="swan-tabs-contents">
    <div
      role="tabpanel"
      class="swan-tab-selected"
      id="auto-id-wv92o67cf-22"
      aria-labelledby="auto-id-wv92o67cf-15"
    >
      Content 1
    </div>
    <div
      role="tabpanel"
      id="auto-id-wv92o67cf-23"
      aria-labelledby="auto-id-wv92o67cf-17"
    >
      Content 2
    </div>
    <div
      role="tabpanel"
      id="auto-id-wv92o67cf-24"
      aria-labelledby="auto-id-wv92o67cf-19"
    >
      Content 3
    </div>
    <div
      role="tabpanel"
      id="auto-id-wv92o67cf-25"
      aria-labelledby="auto-id-wv92o67cf-21"
    >
      Content 4
    </div>
  </div>
</div>

<div class="swan-vanilla-ignore swan-tabs">
  <div role="tablist" class="swan-tabs-headers" aria-label="My Tabs with Icons">
    <input
      type="radio"
      role="tab"
      checked=""
      id="auto-id-wv92o67cf-14"
      name="auto-id-wv92o67cf-26"
      aria-controls="auto-id-wv92o67cf-22"
    /><label id="auto-id-wv92o67cf-15" for="auto-id-wv92o67cf-14"
      ><img
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        alt=""
        class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-upload"
        style='mask-image: url("/builds/main/v3/icons/upload.f828fbaa5cab5380b5b8cb16ff60c6f2.svg");'
      />Header 1</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-wv92o67cf-16"
      name="auto-id-wv92o67cf-26"
      aria-controls="auto-id-wv92o67cf-23"
    /><label id="auto-id-wv92o67cf-17" for="auto-id-wv92o67cf-16"
      ><img
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        alt=""
        class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-upload"
        style='mask-image: url("/builds/main/v3/icons/upload.f828fbaa5cab5380b5b8cb16ff60c6f2.svg");'
      />Header 2</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-wv92o67cf-18"
      name="auto-id-wv92o67cf-26"
      aria-controls="auto-id-wv92o67cf-24"
    /><label id="auto-id-wv92o67cf-19" for="auto-id-wv92o67cf-18"
      ><img
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        alt=""
        class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-upload"
        style='mask-image: url("/builds/main/v3/icons/upload.f828fbaa5cab5380b5b8cb16ff60c6f2.svg");'
      />Header 3 is much longer</label
    ><input
      disabled=""
      type="radio"
      role="tab"
      id="auto-id-wv92o67cf-20"
      name="auto-id-wv92o67cf-26"
      aria-controls="auto-id-wv92o67cf-25"
    /><label id="auto-id-wv92o67cf-21" for="auto-id-wv92o67cf-20"
      ><img
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        alt=""
        class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-upload"
        style='mask-image: url("/builds/main/v3/icons/upload.f828fbaa5cab5380b5b8cb16ff60c6f2.svg");'
      />Header 4</label
    >
  </div>
  <div class="swan-tabs-contents">
    <div
      role="tabpanel"
      class="swan-tab-selected"
      id="auto-id-wv92o67cf-22"
      aria-labelledby="auto-id-wv92o67cf-15"
    >
      Content 1
    </div>
    <div
      role="tabpanel"
      id="auto-id-wv92o67cf-23"
      aria-labelledby="auto-id-wv92o67cf-17"
    >
      Content 2
    </div>
    <div
      role="tabpanel"
      id="auto-id-wv92o67cf-24"
      aria-labelledby="auto-id-wv92o67cf-19"
    >
      Content 3
    </div>
    <div
      role="tabpanel"
      id="auto-id-wv92o67cf-25"
      aria-labelledby="auto-id-wv92o67cf-21"
    >
      Content 4
    </div>
  </div>
</div>

Wrap Headers

wrapHeaders is deprecated in SWAN v3.3 No direct replacement for better semantic roles on SWAN components. Use the default behaviour.

This option makes the headers wrap to the next line if there isn't enough room.

ReactVanilla

<Tabs defaultSelectedTabId="1" wrapHeaders>
  <TabsHeaders aria-label="My Tabs">
    <TabHeader tabId="1">Header 1 text</TabHeader>
    <TabHeader tabId="2">Header 2 text</TabHeader>
    <TabHeader tabId="3">Header 3 text</TabHeader>
    <TabHeader tabId="4">Header 4 text</TabHeader>
    <TabHeader tabId="5">Header 5 text</TabHeader>
    <TabHeader tabId="6">Header 6 text</TabHeader>
    <TabHeader tabId="7">Header 7 text</TabHeader>
    <TabHeader tabId="8">Header 8 text</TabHeader>
    <TabHeader tabId="9">Header 9 text</TabHeader>
    <TabHeader tabId="10">Header 10 text</TabHeader>
    <TabHeader tabId="11">Header 11 text</TabHeader>
    <TabHeader tabId="12">Header 12 text</TabHeader>
    <TabHeader tabId="13">Header 13 text</TabHeader>
    <TabHeader tabId="14">Header 14 text</TabHeader>
  </TabsHeaders>
  <TabsContents>
    <TabContent tabId="1">Content 1</TabContent>
    <TabContent tabId="2">Content 2</TabContent>
    <TabContent tabId="3">Content 3</TabContent>
    <TabContent tabId="4">Content 4</TabContent>
    <TabContent tabId="5">Content 5</TabContent>
    <TabContent tabId="6">Content 6</TabContent>
    <TabContent tabId="7">Content 7</TabContent>
    <TabContent tabId="8">Content 8</TabContent>
    <TabContent tabId="9">Content 9</TabContent>
    <TabContent tabId="10">Content 10</TabContent>
    <TabContent tabId="11">Content 11</TabContent>
    <TabContent tabId="12">Content 12</TabContent>
    <TabContent tabId="13">Content 13</TabContent>
    <TabContent tabId="14">Content 14</TabContent>
  </TabsContents>
</Tabs>

<Tabs defaultSelectedTabId="1" wrapHeaders>
  <TabsHeaders aria-label="My Tabs">
    <TabHeader tabId="1">Header 1 text</TabHeader>
    <TabHeader tabId="2">Header 2 text</TabHeader>
    <TabHeader tabId="3">Header 3 text</TabHeader>
    <TabHeader tabId="4">Header 4 text</TabHeader>
    <TabHeader tabId="5">Header 5 text</TabHeader>
    <TabHeader tabId="6">Header 6 text</TabHeader>
    <TabHeader tabId="7">Header 7 text</TabHeader>
    <TabHeader tabId="8">Header 8 text</TabHeader>
    <TabHeader tabId="9">Header 9 text</TabHeader>
    <TabHeader tabId="10">Header 10 text</TabHeader>
    <TabHeader tabId="11">Header 11 text</TabHeader>
    <TabHeader tabId="12">Header 12 text</TabHeader>
    <TabHeader tabId="13">Header 13 text</TabHeader>
    <TabHeader tabId="14">Header 14 text</TabHeader>
  </TabsHeaders>
  <TabsContents>
    <TabContent tabId="1">Content 1</TabContent>
    <TabContent tabId="2">Content 2</TabContent>
    <TabContent tabId="3">Content 3</TabContent>
    <TabContent tabId="4">Content 4</TabContent>
    <TabContent tabId="5">Content 5</TabContent>
    <TabContent tabId="6">Content 6</TabContent>
    <TabContent tabId="7">Content 7</TabContent>
    <TabContent tabId="8">Content 8</TabContent>
    <TabContent tabId="9">Content 9</TabContent>
    <TabContent tabId="10">Content 10</TabContent>
    <TabContent tabId="11">Content 11</TabContent>
    <TabContent tabId="12">Content 12</TabContent>
    <TabContent tabId="13">Content 13</TabContent>
    <TabContent tabId="14">Content 14</TabContent>
  </TabsContents>
</Tabs>

<div class="swan-tabs swan-tabs-wrap-headers">
  <div role="tablist" class="swan-tabs-headers" aria-label="My Tabs">
    <input
      type="radio"
      role="tab"
      checked=""
      id="auto-id-rxys6dlrg-249"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-277"
    /><label id="auto-id-rxys6dlrg-250" for="auto-id-rxys6dlrg-249"
      >Header 1 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-251"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-278"
    /><label id="auto-id-rxys6dlrg-252" for="auto-id-rxys6dlrg-251"
      >Header 2 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-253"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-279"
    /><label id="auto-id-rxys6dlrg-254" for="auto-id-rxys6dlrg-253"
      >Header 3 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-255"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-280"
    /><label id="auto-id-rxys6dlrg-256" for="auto-id-rxys6dlrg-255"
      >Header 4 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-257"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-281"
    /><label id="auto-id-rxys6dlrg-258" for="auto-id-rxys6dlrg-257"
      >Header 5 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-259"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-282"
    /><label id="auto-id-rxys6dlrg-260" for="auto-id-rxys6dlrg-259"
      >Header 6 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-261"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-283"
    /><label id="auto-id-rxys6dlrg-262" for="auto-id-rxys6dlrg-261"
      >Header 7 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-263"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-284"
    /><label id="auto-id-rxys6dlrg-264" for="auto-id-rxys6dlrg-263"
      >Header 8 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-265"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-285"
    /><label id="auto-id-rxys6dlrg-266" for="auto-id-rxys6dlrg-265"
      >Header 9 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-267"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-286"
    /><label id="auto-id-rxys6dlrg-268" for="auto-id-rxys6dlrg-267"
      >Header 10 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-269"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-287"
    /><label id="auto-id-rxys6dlrg-270" for="auto-id-rxys6dlrg-269"
      >Header 11 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-271"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-288"
    /><label id="auto-id-rxys6dlrg-272" for="auto-id-rxys6dlrg-271"
      >Header 12 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-273"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-289"
    /><label id="auto-id-rxys6dlrg-274" for="auto-id-rxys6dlrg-273"
      >Header 13 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-275"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-290"
    /><label id="auto-id-rxys6dlrg-276" for="auto-id-rxys6dlrg-275"
      >Header 14 text</label
    >
  </div>
  <div class="swan-tabs-contents">
    <div role="tabpanel" id="auto-id-rxys6dlrg-277">Content 1</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-278">Content 2</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-279">Content 3</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-280" class="swan-tab-selected">
      Content 4
    </div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-281">Content 5</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-282">Content 6</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-283">Content 7</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-284">Content 8</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-285">Content 9</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-286">Content 10</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-287">Content 11</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-288">Content 12</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-289">Content 13</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-290">Content 14</div>
  </div>
</div>

<div class="swan-tabs swan-tabs-wrap-headers">
  <div role="tablist" class="swan-tabs-headers" aria-label="My Tabs">
    <input
      type="radio"
      role="tab"
      checked=""
      id="auto-id-rxys6dlrg-249"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-277"
    /><label id="auto-id-rxys6dlrg-250" for="auto-id-rxys6dlrg-249"
      >Header 1 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-251"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-278"
    /><label id="auto-id-rxys6dlrg-252" for="auto-id-rxys6dlrg-251"
      >Header 2 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-253"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-279"
    /><label id="auto-id-rxys6dlrg-254" for="auto-id-rxys6dlrg-253"
      >Header 3 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-255"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-280"
    /><label id="auto-id-rxys6dlrg-256" for="auto-id-rxys6dlrg-255"
      >Header 4 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-257"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-281"
    /><label id="auto-id-rxys6dlrg-258" for="auto-id-rxys6dlrg-257"
      >Header 5 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-259"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-282"
    /><label id="auto-id-rxys6dlrg-260" for="auto-id-rxys6dlrg-259"
      >Header 6 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-261"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-283"
    /><label id="auto-id-rxys6dlrg-262" for="auto-id-rxys6dlrg-261"
      >Header 7 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-263"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-284"
    /><label id="auto-id-rxys6dlrg-264" for="auto-id-rxys6dlrg-263"
      >Header 8 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-265"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-285"
    /><label id="auto-id-rxys6dlrg-266" for="auto-id-rxys6dlrg-265"
      >Header 9 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-267"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-286"
    /><label id="auto-id-rxys6dlrg-268" for="auto-id-rxys6dlrg-267"
      >Header 10 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-269"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-287"
    /><label id="auto-id-rxys6dlrg-270" for="auto-id-rxys6dlrg-269"
      >Header 11 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-271"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-288"
    /><label id="auto-id-rxys6dlrg-272" for="auto-id-rxys6dlrg-271"
      >Header 12 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-273"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-289"
    /><label id="auto-id-rxys6dlrg-274" for="auto-id-rxys6dlrg-273"
      >Header 13 text</label
    ><input
      type="radio"
      role="tab"
      id="auto-id-rxys6dlrg-275"
      name="auto-id-rxys6dlrg-291"
      aria-controls="auto-id-rxys6dlrg-290"
    /><label id="auto-id-rxys6dlrg-276" for="auto-id-rxys6dlrg-275"
      >Header 14 text</label
    >
  </div>
  <div class="swan-tabs-contents">
    <div role="tabpanel" id="auto-id-rxys6dlrg-277">Content 1</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-278">Content 2</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-279">Content 3</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-280" class="swan-tab-selected">
      Content 4
    </div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-281">Content 5</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-282">Content 6</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-283">Content 7</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-284">Content 8</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-285">Content 9</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-286">Content 10</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-287">Content 11</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-288">Content 12</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-289">Content 13</div>
    <div role="tabpanel" id="auto-id-rxys6dlrg-290">Content 14</div>
  </div>
</div>

Managing State in React

Most often with Tabs it is not necessary for you to take ownership of the state (the currently-selected tab). The defaultSelectedTabId prop is available if you'd like to specify which tab should be selected initially without committing to fully managing the Tabs's state.

If you do want to control the state of the Tabs yourself (e.g. other parts of your app care about which tab is currently selected), you can provide the selectedTabId and onRequestTabChange props.

onRequestTabChange is invoked with the requested tabId and it is also passed a second arg which is the event that triggered the change in case you need it.

() => {
  const [selectedTabId, setSelectedTabId] = React.useState('two')
  return (
    <Tabs
      selectedTabId={selectedTabId}
      onRequestTabChange={requestedTabId => setSelectedTabId(requestedTabId)}
    >
      <TabsHeaders aria-label="Controlled State Tab Example">
        <TabHeader tabId="one">Header 1</TabHeader>
        <TabHeader tabId="two">Header 2</TabHeader>
      </TabsHeaders>
      <TabsContents>
        <TabContent tabId="one">Content 1</TabContent>
        <TabContent tabId="two">Content 2</TabContent>
      </TabsContents>
    </Tabs>
  )
}

() => {
  const [selectedTabId, setSelectedTabId] = React.useState('two')
  return (
    <Tabs
      selectedTabId={selectedTabId}
      onRequestTabChange={requestedTabId => setSelectedTabId(requestedTabId)}
    >
      <TabsHeaders aria-label="Controlled State Tab Example">
        <TabHeader tabId="one">Header 1</TabHeader>
        <TabHeader tabId="two">Header 2</TabHeader>
      </TabsHeaders>
      <TabsContents>
        <TabContent tabId="one">Content 1</TabContent>
        <TabContent tabId="two">Content 2</TabContent>
      </TabsContents>
    </Tabs>
  )
}

Accessibility

Tabs requires some aria attributes set for accessibility compliance:

TabsHeaders should have an aria label attached to the component. This can be done with the aria-label attribute for a string value or with the aria-labelledby attribute to give the id of another HTML element acting as the label. Ensure this is localized as it will be read out to the user.

Best practices

Dont

Nest one set of tabs inside another.

Dont

Use more than one row of tabs.

SEO considerations

Content within any tab that's not the default tab is readable by Googlebot, but not SEO-friendly. Googlebot considers content you put behind these tabs as less important for users and for organic visibility (ranking). All major content must appear on the default tab; other tabs must contain less important information since they will be deprecated by Googlebot in terms of ranking.
Whenever possible, instead of displaying the content behind a tab, use anchor links that point to a different location on the same page.

Props

Tabs

This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.