Newskit Logo

Navigation

Tabs

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

Status

Supported

Introduced

v0.20.1
View code

Status

Supported

Introduced

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.

Distribution
Size
Space Inline
Tab Bar Track Weight
Tab Bar Indicator Weight
Tab Bar Indicator size
Style preset overrides
divider
vertical
Align
Indicator Position

Anatomy

Tabs contain three required elements and one optional element.

ItemNameDescriptionComponentOptional
1
TabIncludes a label, icon
Text Block
2
TabsIncludes a list of TabsTabs
3
Tabs BarIncludes indicator and trackBlock
4
DividerDividers between each TabDivider
5
Tab PanelContains the elements of the Tab contentBlock

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

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
.

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.

Focus order
OrderElementRole
1
tabFocusses to the first Tab Item in a Tab list.
2
tabPanelFocusses to the Tab Panel.

Scroll controls are not focussable.

Keyboard Interactions
CommandDescription
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
ElementAttributeValueDescriptionUser Supplied
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.

NameTypeDefaultDescriptionRequired
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.
onChange

(selectedIndex:number):void

Callback fired when selected tab changes.
Tab

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

NameTypeDefaultDescriptionRequired
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.

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.

FeatureDescriptionStatus
VariationsRelevant variations (style, size, orientation etc.)
Interactive statesAll interactive states that are applicable (hover, active, focus, focus, disabled, error etc).
Defined behavioursGuidelines for layout, animation, interactions, etc.
Usage guidelinesIncludes a list of dos and don’ts that highlight best practices and common mistakes to avoid.
Accessibility guidelinesFollows WCAG 2.0 standards (AA). Accessibility documentation defined including focus order, keyboard interactions and ARIA.
SEO guidelinesConforms to best practice SEO techniques. SEO considerations defined.
PropsDetails of component properties - their name, type, options, default, whether it’s required and their description have been defined.
Technical performance considerationsDetails on how this component may impact performance.
Available in UI kitIncluded within Figma Web Gallery file.
Design specificationsDetailed design specification including sizing, spacing and design tokens defined.
ThemesDisplays correctly across light and dark themes.

Need Help?

Cant find what you are looking for?

Cant find what you are looking for?