Home
Tabs
Learn how to use the Tabs component in your documentation to group similar content.
This is the content for the first tab.
This is the content for the second tab.
Overview
Tabs can be used to group similar content in your documents, typically when
the content in only one of the tabs is relevant to the reader. For example, tabs
could be used to show instructions to perform the same task in different
operating systems. Any kind of content can be placed within a Tab component,
such as images, tables, code blocks, and other components.
Properties
Tabs
| Name | Type | Description |
|---|---|---|
defaultIndex | number | Initial index of the selected tab. 0 is the first Tab. |
Tab
| Name | Type | Description |
|---|---|---|
title required | string | Title of the tab. |
Examples
Tabs with text content
This is the content for the first tab.
This is the content for the second tab.
<Tabs> <Tab title="First Tab"> This is the content for the first tab. </Tab> <Tab title="Second Tab"> This is the content for the second tab. </Tab></Tabs>
Tabs with other content types
Note
You can nest other components inside of a Tab.
Tabs with default index specified
This tab is index 0.
This tab is index 1. This is the specified defaultIndex.
This tab is index 2.
<Tabs defaultIndex={1} > <Tab title="Index 0"> This tab is index 0. </Tab> <Tab title="Index 1"> This tab is index 1. This is the specified `defaultIndex`. </Tab> <Tab title="Index 2"> This tab is index 2. </Tab></Tabs>
Keyboard support
| Key | Action |
|---|---|
| ArrowLeft | Moves focus to the next tab |
| ArrowRight | Moves focus to the previous tab |
| Tab | When focus moves into the tab list, places focus on the active tab element |
| Space or Enter | Activates the tab if it was not activated automatically on focus |
| Home | Moves focus to the first tab |
| End | Moves focus to the last tab |