Tabs
A tabbed interface component for organizing content into multiple panels.
Throughout the Multiverse, the name Optimus Prime is associated with bravery, self-sacrifice, and an indomitable fighting spirit, a warrior always ready to lay down their life to protect sentient life, no matter its form.
Megatron is the founder of the Decepticon uprising, and their most well-known and feared leader. As a young, charismatic leader forged in battle and the heritage of war, he began to believe in a grand purpose for his race it is the Transformers' glorious destiny to rule an empire which will span the universe. The opposite of his mortal enemy Optimus Prime, he feels great contempt for other Transformers who, he feels, betray their proud heritage by demanding peace and cooperation with weaker life forms. It is the destiny of the Decepticons to bring order to the universe through conquest, though in the millions of years since coining this purpose it remains to be seen how much of his mission statement is altruistic... and how much of it is mere words built to fuel warriors to further his desire for personal power.
Bumblebee, formerly known as Volks, is one of the smallest and physically weakest Autobots. While his stature allows him to do his job better than most Autobots could manage, he is self-conscious about his size. Maybe this is why he makes fast friends among the humans. He looks up (so to speak) to the other Autobots, especially Optimus Prime, but what he doesn't realize is that they look up to him. He may be small, but he's brave, and he's one of the most well-liked Autobots around. Bumblebee already has the respect he craves. But the poor bot seems to get kidnapped a lot. Bumblebee is the Autobot's spy and scout. His talents involve espionage.
Code
<Tabs
tabs={[
{
id: "tab-1",
label: "Tab 1",
content: "Tab content goes here...",
default: true
},
{
id: "tab-2",
label: "Tab 2",
content: "Tab content goes here..."
},
{
id: "tab-3",
label: "Tab 3",
content: "Tab content goes here..."
}
]}
/>Props
| Name | Type | Required | Description |
|---|---|---|---|
tabs |
Tab[] | Yes | Array of tabs to display |
Tab Props
| Name | Type | Required | Description |
|---|---|---|---|
id |
string | Yes | Unique identifier for the tab |
label |
string | Yes | Label text displayed on the tab |
content |
string | Yes | HTML content for the tab panel |
default |
boolean | No | Whether this tab should be the default active tab. If no tab is marked as default, the first tab will be selected |
Usage
✅ Do’s
- Use for reducing cognitive load
- Use for organizing related content into distinct sections
- Order tabs by priority or logical sequence
- Keep tab labels short and descriptive
❌ Don’t’s
- Don’t use for primary navigation
- Don’t use too many tabs (limit to 5–7 max)
- Don’t use for content that should be viewed all at once
- Don’t hide critical information in non-default tabs
Accessibility
Keyboard Navigation
- Tab key moves focus to the active tab
- Arrow keys navigate between tabs
- Home/End keys jump to first/last tab
- Space/Enter activates the focused tab
Screen Reader Support
- The tabs interface context is announced to screen readers
- Uses
role="tablist"for the tab container role="tab"for individual tabsrole="tabpanel"for content panelsaria-selectedindicates active tabaria-controlsassociates tabs with their panels