Navigation

Tabs

Tabs allow users to alternate between views within the same context.

Status

Supported

Introduced

v0.20.1

View code

View Design

Status

Supported

Introduced

v0.20.1

View code

View Design

Interactive Demo

This demo allows you to preview the Tabs component, its variations, and configuration options.

Stories of our Times | One remarkable story, told in depth, each day. Our daily news podcast takes you to the heart of the stories that matter, with exclusive access and reporting. Published for the start of your day and hosted by Manveen Rana and David Aaronovitch.

1import React from 'react';
2import { Tabs } from 'newskit';
3
4export default () => (
5  <Tabs
6    distribution="start"
7    size="medium"
8    overrides={{
9      selectionIndicator: { track: {}, indicator: {} },
10    }}
11    initialSelectedIndex={0}
12    align="center"
13    indicatorPosition="end"
14  />
15);
16

Anatomy

Tabs contain three required elements and one optional element.

Item	Name	Description	Component
1	Tab	Includes a label, icon	Text Block Icon
2	Tabs	Includes a list of Tabs	Tabs
3	Tabs Bar	Includes indicator and track	Block
4	Divider	Dividers between each Tab	Divider
5	Tab Panel	Contains the elements of the Tab content	Block

Options

Tabs have options that can be used to provide an appropriate experience for different use cases.

Size

There are three sizes of the Tabs; small, medium, and large. Tab label, icon, and the tab container change size. Tabs match the same height as three button sizes, to align when used together.

Icons (leading & trailing)

Icons can be displayed in Tab items and can be positioned either before (leading) or after (trailing) the label in the Tab.

Label

Labels can be displayed in Tab items. A label can give more context to what content will be displayed when a Tab is selected.

Orientation

Tabs can be displayed horizontally or vertically.

Indicator Position

The Tabs indicator position can be displayed on the bottom of the Tab for the horizontal orientation and left or right of the Tab for the vertical orientation.

Indicator Size

The size of a Tab indicator can be defined appropriately to give more or less affordance, using either: full-width of the tab, fixed-width/fixed-height (based on orientation) or a percentage of the Tab height/width (based on orientation).

Indicator Weight

The weight of a Tab indicator can be customised appropriately to give more or less affordance.

Track Weight

The weight of a Tab track can be customised appropriately to give more or less affordance.

Dividers

Dividers can be displayed in Tabs in between Tab items. Dividers in Tabs match the same width/height (depending on orientation) of the Tab items.

Distribution

Start
Aligns the Tab items to the left of the content area for horizontal orientation (default) and to the top for vertical orientation. The width of the Tab Group is defined by the width of its children.
Grow
Spreads all Tab items across the content area, filling the entire available width or height depending on the orientation. The width of each Tab item is defined by it’s content.
Equal
Spaces each tab across the content area equally, regardless of the width or height of its children.

Alignment

Start
Aligns the Tab item label and icons to the left.
Center
Centers the Tab item label and icons.
End
Aligns the Tab item label and icons to the right.

NOTE - The default alignment depends on the orientation. When Tabs are vertical it’s

Start

and when Tabs are horizontal it’s

Center

Size

There are three sizes of the Tabs; small, medium, and large. Tab label, icon, and the tab container change size. Tabs match the same height as three button sizes, to align when used together.

Icons (leading & trailing)

Icons can be displayed in Tab items and can be positioned either before (leading) or after (trailing) the label in the Tab.

Label

Labels can be displayed in Tab items. A label can give more context to what content will be displayed when a Tab is selected.

Orientation

Tabs can be displayed horizontally or vertically.

Indicator Position

The Tabs indicator position can be displayed on the bottom of the Tab for the horizontal orientation and left or right of the Tab for the vertical orientation.

Indicator Size

Indicator Weight

The weight of a Tab indicator can be customised appropriately to give more or less affordance.

Track Weight

The weight of a Tab track can be customised appropriately to give more or less affordance.

Dividers

Dividers can be displayed in Tabs in between Tab items. Dividers in Tabs match the same width/height (depending on orientation) of the Tab items.

Distribution

Start
Aligns the Tab items to the left of the content area for horizontal orientation (default) and to the top for vertical orientation. The width of the Tab Group is defined by the width of its children.
Grow
Spreads all Tab items across the content area, filling the entire available width or height depending on the orientation. The width of each Tab item is defined by it’s content.
Equal
Spaces each tab across the content area equally, regardless of the width or height of its children.

Alignment

Start
Aligns the Tab item label and icons to the left.
Center
Centers the Tab item label and icons.
End
Aligns the Tab item label and icons to the right.

NOTE - The default alignment depends on the orientation. When Tabs are vertical it’s

Start

and when Tabs are horizontal it’s

Center

States

Tab items have states including, base, hover, active, disabled, and focus. They can be displayed with both, base or selected. By default, Tabs have one Tab item in a selected state.

Base

Tab items have a base state. This is the base style of the Tab item before it has been interacted with by a user.

Hover

Tab items have a hover state. The style of the Tab item changes to visually communicate and provide feedback to the user that the Tab item is an interactive element.

Active

Tab items have an active state. The style of the Tab item changes to visually communicate and provide feedback to the user that the Tab item has been interacted with.

Selected

Tab items have a selected state. The style of the Tab item changes to visually communicate and provide feedback to the user that the Tab item has been selected.

Disabled

Tab items in a disabled state communicate that a Tab item exists, but is not available to the user in that scenario. When the user’s cursor hovers over a Tab item in a disabled state, the cursor shows as not-allowed. Disabled tab items are often used to maintain layout consistency and communicate that a Tab item may become available if another condition has been met.

Focus

Tab items in a focus state communicate that a user has highlighted a Tab item, using an input method such as a keyboard or voice.

Behaviours

The following guidance describes how Tabs behave.

Animation

When the user selects a Tab item, the indicator slides along the track of the Tabs to the newly selected Tab item. At the time of selection, the Tabs content changes immediately.

Selected

Only one tab item can be selected at any given time. This property changes an individual tab item’s selected state.

Tabs Overflow

When there are too many Tabs to fit horizontally across the viewport, a Scroll component is applied. On a desktop, the controls (buttons) are rendered on the scroll.

Label Overflow Wrap

When the label in a Tab item is too long for the available horizontal space, it wraps to form another line.

Animation

When the user selects a Tab item, the indicator slides along the track of the Tabs to the newly selected Tab item. At the time of selection, the Tabs content changes immediately.

Selected

Only one tab item can be selected at any given time. This property changes an individual tab item’s selected state.

Tabs Overflow

When there are too many Tabs to fit horizontally across the viewport, a Scroll component is applied. On a desktop, the controls (buttons) are rendered on the scroll.

Label Overflow Wrap

When the label in a Tab item is too long for the available horizontal space, it wraps to form another line.

Usage

The following guidance describes how and when to appropriately use a Tab component.

Do

Use tabs to alternate between views within the same context.

Do not

Avoid using Tabs to navigate to different pages and anchoring to different sections on a page. A Navigation component is a more appropriate component for this purpose.

Do

Use Tabs when users have two or more content views to choose from.

Do not

Avoid using Tabs when there are more than five or more content views to choose from. Consider using an alternative component such as a Selector to reduce the users cognitive load.

Do

All Tab items should be consistent in size e.g. small, medium or large Tab item. This is to ensure Tab items have equal importance.

Do not

Don’t mix Tab items that include an icon or don’t include an icon. This is to ensure Tab items have equal importance.

Do

Tab labels should be in sentence case. This helps with scannability and legibility.

Do not

Tab labels shouldnt be truncated. Keep it short, clear, and fully visible.

Do

Tabs should be in close proximity to the content it’s changing.

Do not

Avoid nesting Tabs to prevent usability issues. Consider using an alternative component such as an Accordion or rethink the page structure.

Do

The Tab shouldn’t fall out of view of the content. If the content is too large to display with the Tabs in the same viewport, then ensure the Tabs become fixed (sticky).

Do

Tabs in the vertical orientation should be used when horizontal space is less generous and when the list of sections is greater than can be presented to the user in a horizontal format.

Accessibility Considerations

Tabs implement the latest WAI-ARIA Tabs specifications.

Focus order

Order	Element	Role
1	tab	Focusses to the first Tab Item in a Tab list.
2	tabPanel	Focusses to the Tab Panel.

Scroll controls are not focussable.

Keyboard Interactions

Command	Description
Tab	When focus is outside of the Tab list it moves focus to the active Tab. If focus is on the active Tab it moves focus to the next element in the keyboard focus Tabs associated Tab panel.
Rtn	Activates the Tab if it was not activated automatically on focus.
Left	Focuses and activates the previous Tab in the tab list when the Tabs orientation is horizontal. If the current tab is the first tab in the tab list it activates the last tab.
Right	Focuses and activates the next Tab in the Tab list when the Tabs orientation is horizontal. If the current tab is the last tab in the tab list it activates the first tab.
Up	Focuses and activates the previous Tab in the tab list when the Tabs orientation is vertical. If the current tab is the first tab in the tab list it activates the last tab.
Down	Focuses and activates the next Tab in the Tab list when the Tabs orientation is vertical. If the current tab is the last tab in the tab list it activates the first tab.
Home	Focuses activates the first Tab in the Tab list.
End	Focuses activates the last Tab in the Tab list.

WAI-ARIA

Element	Attribute	Value	Description
tab	arialabel		Aria-label attribute is used to define a string that labels the action that will be performed when the user interacts with a Tab Item in a Tabs. Example: ariaLabel="view component overrides”
tab	aria-selected	“true” or “false”	Aria-selected is used to indicate the currently selected tab
tab	aria-controls	auto-generated	Maintains a reference from the tab to the associated panel
tab	aria-hidden	“true”	Hides the Tab Bar Indicator from screenreaders.
tab	aria-labelledby	auto-generated	Maintains a reference from the tab to the associated panel
tab	role	“tabpanel”	ARIA Tab role indicates an interactive element inside a Tab Group that, when activated, displays its associated Tab Panel
tab	aria-orientation	“horizontal” or “vertical”	Describes the orientation of the tabs

Note

By default, ariaLabel will match the Tab text label. Where a Tab item text label is not visible on the screen I.E. if there is only an icon in a Tab item, a string should be parsed to the title prop on the icon.

SEO Considerations

Ensure icons have Alt Text applied.

API

Tabs have a range of props that can be used to define an appropriate experience for different use cases.

Tabs

Tabs have a range of props that can be used to define an appropriate experience for different use cases.

Name	Type	Default	Description
children	React.ReactNode		An array of Tab components.
vertical	boolean	false	If true, changes the orientation to vertical.
distribution	"start" "grow" "equal"	TabsDistribution.start	Defines the distribution of the Tabs.
align	"start" "end" "center"	Tab.Align.Start	Defines the alignment of the Tabs.
divider	boolean	false	If true, renders a divider component between Tab items in a Tab list.
initialSelectedIndex	number	0	Defines the index of the initially selected Tab item (uncontrolled).
selectedIndex	number		Defines the index of the selected Tab item, when changing this value tabs state is updated (controlled).
onChange	(selectedIndex:number):void		Callback fired when selected tab changes.

To support resizing of the selected tab indicator this component uses the ResizeObserver API this is not supported in Internet explorer, if you require support we suggest you add a pollyfill to your application.

Attribute	Type	Default	Description
spaceInline	MQ<string>	space020	If provided, this overrides the space between the Tabs and the Tab Panel.
tab .spaceInline	MQ<string>		If provided, this overrides the space between each Tab and divider
selectionIndicator .track .stylePreset	MQ<string>	tabBarTrack	If provided, this overrides the selection indicator track styling.
selectionIndicator .track .weight	MQ<string>	borderWidth020	If provided with a sizing token, will override the fixed weight (height if horizontal, width if vertical) of the election indicator track.
selectionIndicator .indicator .stylePreset	MQ<string>	tabsBarIndicator	If provided, this overrides the indicator styling.
selectionIndicator .indicator .size	string		If provided with a sizing token or any CSS length value e.g. 75%, will override the indicator size.
selectionIndicator .indicator .weight	string	borderWidth020	If provided with a sizing token, will override the fixed weight (height if horizontal, width if vertical) of the indicator.
selectionIndicator .indicator .motionDuration	string	motionDuration030	If provided with a motion duration token, this overrides the transition duration upon hover and active of the indicator.
selectionIndicator .indicator .motionTiming	string	motionTimingEaseInAndOut	If provided with a motion timing token, this overrides the transition timing upon hover and active of the indicator.
divider	DividerOverrides		If provided, this overrides the divider styling, see divider component for full documentation.
scroll	Override<ScrollProps>		If provided, this overrides the scroll styling, see scroll component for full documentation.

Tab

A Tab has a range of props that can be used to define an appropriate experience for different use cases.

Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the Tab Panel.
label	React.ReactNode		Label of the Tab item.
ariaLabel	string	label	Defines the aria-label attribute of the Tab item.
disabled	boolean	false	If true, renders a Tab in a disabled state.
autoFocus	boolean	false	If true, this Tab will be auto-focussed. Only one item on the page can be auto-focussed.
dataTestId	string	tab	Defines the data-testid attribute of the Tab item.

Attribute	Type	Default	Description
height	MQ<string>		If provided with a sizing token, will override the the height of the Tab.
minHeight	MQ<string>	Small = sizing060 Medium = sizing080	If provided with a sizing token, will override the minHeight of the Tab.
width	MQ<string>		If provided with a sizing token, will override the minWidth of the Tab.
iconSize	MQ<string>	Small = iconSize010 Medium = iconSize020 Large = iconSize030	If provided with a sizing token, will override the minWidth of the Tab.
stylePreset	MQ<string>	tab	If provided, this overrides the Tab styling.
typographyPreset	MQ<string>	Small = utilityButton010 Medium = utilityButton030 Large = utilityButton030	If provided, this overrides the selection indicator typography of the text label in the Tab.
spaceInset	MQ<string>	Small = spaceInsetSquish020 Medium = spaceInsetSquish030 Large = spaceInsetSquish030	If provided, this overrides the inset space within the Tab.
spaceInline	MQ<string>	space020	If provided, this overrides the space between the icon and the label in the Tab.
maxWidth	MQ<string>		If provided, this sets a maximum height to the Tab. This can be a sizing token from the theme, or any CSS length value.
minWidth	MQ<string>		If provided, this sets a maximum width to the Tab. This can be a sizing token from the theme, or any CSS length value.

Compliance

All of the components in the NewsKit design system go through a comprehensive set of checks to ensure that we are producing compliant and best practice components.

Feature	Description	Status
Variations	Relevant variations (style, size, orientation etc.)
Interactive states	All interactive states that are applicable (hover, active, focus, focus, disabled, error etc).
Defined behaviours	Guidelines for layout, animation, interactions, etc.
Usage guidelines	Includes a list of dos and don’ts that highlight best practices and common mistakes to avoid.
Accessibility guidelines	Follows WCAG 2.0 standards (AA). Accessibility documentation defined including focus order, keyboard interactions and ARIA.
SEO guidelines	Conforms to best practice SEO techniques. SEO considerations defined.
Props	Details of component properties - their name, type, options, default, whether it’s required and their description have been defined.
Technical performance considerations	Details on how this component may impact performance.
Available in UI kit	Included within Figma Web Gallery file.
Design specifications	Detailed design specification including sizing, spacing and design tokens defined.
Themes	Displays correctly across light and dark themes.

Need Help?

Cant find what you are looking for?

Need Help?

Cant find what you are looking for?

Tabs

Status

Introduced

Status

Introduced

Interactive Demo

Anatomy

Options

Size

Icons (leading & trailing)

Label

Orientation

Indicator Position

Indicator Size

Indicator Weight

Track Weight

Dividers

Distribution

Alignment

Size

Icons (leading & trailing)

Label

Orientation

Indicator Position

Indicator Size

Indicator Weight

Track Weight

Dividers

Distribution

Alignment

States

Base

Hover

Active

Selected

Disabled

Focus

Behaviours

Animation

Selected

Tabs Overflow

Label Overflow Wrap

Animation

Selected

Tabs Overflow

Label Overflow Wrap

Usage

Do

Do not

Do

Do not

Do

Do not

Do

Do not

Do

Do not

Do

Do

Accessibility Considerations

SEO Considerations

API

Compliance

Related Components

Scroll

Need Help?

Need Help?