Tabs

Tabs allow the user to select layered sections of content to display within the same space.

Anatomy

1. Tab list – A horizontal arrangement of selectable tab elements that serve as a navigation interface.
2. Tab Container – An outline, background color, or extra space that sets the tab apart from adjacent tabs.
3. Label – a short title that lets the user know what content is contained in the tab.
4. Selected Tab Marker- A visual indication of the selected open tab.
5. Tab Panel – The divider separating the tab list from the tab content.

Usage

Single Tab Usage Warning

Tabs must always be part of a tab list containing two or more tabs. For a single tab, use a heading instead.

• Use tabs to organize and present related content together while keeping the focus in the same place.
• The selected tab must have a clear indicator showing that it is selected.
• Tabs are commonly displayed horizontally.
• The tab list should always be positioned along one edge of the tab panel.
• Tabs should always include visible text labels. Tab labels may contain an icon in addition to text. All tab labels in the same tab list must follow the same pattern, whether they include text only or text and an icon.
• On mobile, tab bars may scroll if there is not enough space to display all of the tabs at once. It should be clear to users that there are more tabs that they can scroll through.
• Tabs should always take up the full width of the page or screen with no other components beside them.

Don't

Don’t use tabs for more than 4 or 5 sections of content. Use a menu for more than 5 sections of content.

Tabs & Menus

• Tabs and menus can be similar and even styled the same in some cases. Tabs are for displaying layered pieces of content, and menus are for navigation. Tabbed menus may look like tabs but functionally be navigating users to a different link, and menus move focus.

React API

The Tabs are implemented by combining the following components:

• Tabs: Wrapper Component, it orchestrates the internal state.
• TabList: A list of Tab components.
• Tab: The Tab button, when the user activates this, the corresponding TabPanel is displayed.
• TabPanels: A list of TabPanel components.
• TabPanel: A wrapper for the content corresponding to a given "Tab".

When the user clicks on a Tab the TabPanel with same index is shown. The index for Tab components is calculated based on order of appearance of each Tab from top to bottom inside the TabList. Likewise, the index for TabPanel components is based on order of appearance from top to bottom as well, but this time inside TabPanels component.

<Tabs>
	<TabList>
		<Tab>Tab 1</Tab> {/* Index is 1 */}
		<div> {/* You can add any arbitrary elements, it won't affect indexing */}
			<Tab>Tab 2</Tab> {/* Index is 2 */}
		</div>
	</TabList>
	<TabPanels>
		<TabPanel>Content 1</TabPanel> {/* Index is 1 */}
		<div></div> {/* Won't affect indexing */}
		<TabPanel>Content 2</TabPanel> {/* Index is 2 */}
	</TabPanels>
</Tabs>

Basic Usage

import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@wwnds/react';

Live Editor

<Tabs>
	<TabList>
		<Tab>Cats</Tab>
		<Tab>Dogs</Tab>
		<Tab>Horses</Tab>
		<Tab>Cows</Tab>
	</TabList>
	<TabPanels>
		<TabPanel>Cats content</TabPanel>
		<TabPanel>Dogs content</TabPanel>
		<TabPanel>Horses content</TabPanel>
		<TabPanel>
			Cows content
			{' '}
			<Button onClick={() => console.log('Moo!')}>Moo!</Button>
		</TabPanel>
	</TabPanels>
</Tabs>

Result

Loading...

Accessibility

This is an implementation of the WAI-ARIA Tab Pattern with Manual Activation. Keyboard navigation is implemented as specified in that pattern.

Tabs

Tabs is the component that wraps and orchestrates the internal state.

Live Editor

<Tabs>
	<TabList>
		<Tab>Tab 1</Tab>
		<Tab>Tab 2</Tab>
	</TabList>
	<TabPanels>
		<TabPanel>Content 1</TabPanel>
		<TabPanel>Content 2</TabPanel>
	</TabPanels>
</Tabs>

Result

Loading...

Name	Description	Type
selectedIndex (required)	The currently active tab, for controlled use only	number
onChange (required)	Callback for when the user interacts with one of the Tab buttons, it will pass the position index of the selected tab.	(selectedIndex: number) => void
idPrefix	Prefix used to replace the autogenerated id prefix for tabs and tab panels.	string
align	Adjusts the tabs alignment. Alignments available: left: Displays the tabs aligned to the left of the TabList center: Displays the tabs aligned at the center of the TabList Defaults to left.	"left" | "center"
variant	Adjusts the variant. Variants Available: contained: Tabs are displayed with background color. line: Tabs are displayed without its own background color, using that of the container. Defaults to Contained	"line" | "contained"
className		string
defaultSelectedIndex	Sets the default active tab, for uncontrolled use only. Will be ignored if the selectedIndex prop is defined.	number

TabList

TabList contains a set of Tab components. Renders a component with tablist role.

<TabList>
	<Tab>Tab 1</Tab>
	<Tab>Tab 2</Tab>
</TabList>

Tab

Tab renders a Button with the tab role. An index is assigned to the tab internally that identifies which TabPanel this tab controls, the index is assigned by order of appearance from top to bottom.

<Tab>Tab 1</Tab>

TabPanels

TabPanels contains a set of TabPanel components.

<TabPanels>
	<TabPanel>Content 1</TabPanel>
	<TabPanel>Content 2</TabPanel>
</TabPanels>

TabPanel

TabPanel renders, when active, the content of the panel wrapped inside an element with tabpanel ARIA role.

The TabPanel is active, if the tab that controls it is activated. Each TabPanel is assigned an index based on the order of appeared of the panel inside the TabPanels component from top to bottom, this index is used to know which Tab inside TabList controls any given TabPanel.

<TabPanel>Content 1</TabPanel>

Style Variants

Centered Alignment

Live Editor

<Tabs align="center">
	<TabList>
		<Tab>Cats</Tab>
		<Tab>Dogs</Tab>
		<Tab>Horses</Tab>
		<Tab>Cows</Tab>
		<Tab>Beavers</Tab>
	</TabList>
	<TabPanels>
		<TabPanel>Cats content</TabPanel>
		<TabPanel>Dogs content</TabPanel>
		<TabPanel>Horses content</TabPanel>
		<TabPanel>Cows content</TabPanel>
		<TabPanel>Beavers content</TabPanel>
	</TabPanels>
</Tabs>

Result

Loading...

Line Variant

Live Editor

<Tabs variant="line">
	<TabList>
		<Tab>Cats</Tab>
		<Tab>Dogs</Tab>
		<Tab disabled>Horses</Tab>
		<Tab>Cows</Tab>
		<Tab>Beavers</Tab>
	</TabList>
	<TabPanels>
		<TabPanel>Cats content</TabPanel>
		<TabPanel>Dogs content</TabPanel>
		<TabPanel>Horses content</TabPanel>
		<TabPanel>Cows content</TabPanel>
		<TabPanel>Beavers content</TabPanel>
	</TabPanels>
</Tabs>

Result

Loading...