Tabs

Tabs is a component for switching between different display areas.

The Tabs follows the WAI-ARIA - Tabs Pattern for accessibility.

When using only icons in Tab, set aria-label for the Tab.

<Tabs>
  <Tab>フリーザ</Tab>
  <Tab aria-label="Send an email to Freeza">
    <Mail />
  </Tab>

  <TabPanel>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </TabPanel>
  <TabPanel>フリーザ様にメールを送る</TabPanel>
</Tabs>

Copied!

Setting aria-label on TabList will make it readable by screen readers.

<Tabs tabListProps={{ "aria-label": "DRAGON BALL characters" }}>
  <Tab>孫悟空</Tab>
  <Tab>ベジータ</Tab>
  <Tab>フリーザ</Tab>

  <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
  <TabPanel>へっ！きたねぇ花火だ</TabPanel>
  <TabPanel>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </TabPanel>
</Tabs>

Copied!

Or,

<Tabs>
  <TabList aria-label="DRAGON BALL characters">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>
  </TabList>

  <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
  <TabPanel>へっ！きたねぇ花火だ</TabPanel>
  <TabPanel>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </TabPanel>
</Tabs>

Copied!

Key	Description	State
`Tab`	When focus moves to the tab list, it focuses the active tab.	-
`ArrowLeft`	Focuses and activates the previous tab that is not disabled.	`orientation="horizontal"`
`ArrowRight`	Focuses and activates the next tab that is not disabled.	`orientation="horizontal"`
`ArrowUp`	Focuses and activates the previous tab that is not disabled.	`orientation="vertical"`
`ArrowDown`	Focuses and activates the next tab that is not disabled.	`orientation="vertical"`
`Space`, `Enter`	Activates the tab that is in focus.	`isManual={true}`
`Home`	Focuses and activates the first tab that is not disabled.	-
`End`	Focuses and activates the last tab that is not disabled.	-

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`TabList`	`role="tablist"`	Indicates that it is a tab list.
	`aria-orientation`	Sets to `"horizontal"` or `"vertical"` based on the value of `orientation`.
`Tab`	`role="tab"`	Indicates that it is a tab.
	`id`	The `id` used to associate with `role="tabpanel"`.
	`aria-controls`	Sets the `id` of the associated `role="tabpanel"`.
	`aria-selected`	Sets to `true` if the tab is active, and sets to `false` for all other tabs.
`TabPanel`	`role="tabpanel"`	Indicates that it is a tab panel.
	`id`	The `id` used to associate with `role="tab"`.
	`aria-labelledby`	Sets the `id` of the associated `role="tab"`.

Edit this page on GitHub

PreviousAccordion NextTree