Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetFooterIconKorosLoading spinnerLogoNavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupStatus labelTabsPrinciplesAccessibilityUsage & variationsDemos & APITagText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Tabs

StableAccessible

Tabs are used to help the user browse and navigate between information contents that have a relation.

Principles

  • Contents of the tabs in a single tab list should have a relation to each other. Do not use tabs for only navigation purposes but actually group views within a context.
  • Pay close attention to tab labels. They should clearly indicate the contents of the tab so the user can reliably guess what they will find inside the tab.
    • Keep tab labels short and concise - maximum of 1-2 words long. Do not use ALL CAPS in tab labels.
  • It is recommended that the maximum amount of tabs in a single tab list is six (6).
  • When using tabs, keep in mind that the user should not be required to compare information between tabs. Constantly switching between tabs can be a very cumbersome experience, so make sure that all information that the user needs is available in a single view.
  • Do not use HDS Tabs to create step-by-step forms. You must not expect that the user activates all tabs in a specific order.
  • Do not span tab lists into multiple rows. If you are running out of space, consider if using tabs is the correct option or use the overflow functionality that HDS Tabs offer.

Accessibility

  • It is advisable to use colour combinations provided by the implementation. These combinations are ensured to comply with WCAG AA requirements. When customising colours, refer to colour guidelines to ensure accessibility.
  • The TabPanel must appear right below the TabList in the DOM tree. This means that the next focusable element after the TabList will be the tab's content.
  • While HDS Tabs are accessible, you must ensure that the content displayed in the TabPanel is also accessible.
  • HDS Tabs use manual activation. This means that when using tabs with a keyboard, each tab must be separately activated with Enter/Space, and they do not activate automatically. If you are creating custom tabs for your project, follow the same control scheme.

Usage & variations

Default

Default tab variant is suitable for most use cases. It features tabs that are at equal width based on the widest tab label.

Daytime care for people who cannot be fully independent, such as children or elderly people.

React code example:

<Tabs>
<TabList style={{marginBottom: 'var(--spacing-m)'}}>
<Tab>Daycare</Tab>
<Tab>Pre-school</Tab>
<Tab>Basic education</Tab>
<Tab>Upper secondary</Tab>
<Tab>University</Tab>
</TabList>
<TabPanel>Daytime care for people who cannot be fully independent, such as children or elderly people.</TabPanel>
<TabPanel>...</TabPanel>
<TabPanel>...</TabPanel>
<TabPanel>...</TabPanel>
<TabPanel>...</TabPanel>
</Tabs>

Small

Small tabs variant can be used on smaller screens or when you are tight on space. Small tabs use space much more efficiently by reducing a single tab width and font size.

Daytime care for people who cannot be fully independent, such as children or elderly people.

React code example:

<Tabs small>
<TabList style={{marginBottom: 'var(--spacing-m)'}}>
<Tab>Daycare</Tab>
<Tab>Pre-school</Tab>
<Tab>Basic education</Tab>
<Tab>Upper secondary</Tab>
<Tab>University</Tab>
</TabList>
<TabPanel>Daytime care for people who cannot be fully independent, such as children or elderly people.</TabPanel>
<TabPanel>...</TabPanel>
<TabPanel>...</TabPanel>
<TabPanel>...</TabPanel>
<TabPanel>...</TabPanel>
</Tabs>

Overflow tabs

HDS Tabs have an automatic overflow functionality when the TabList does not fit into its container. In this case, an overflow indicator icon is shown at the edge of the TabList if there are tabs outside of the visible area. TabList scrolls automatically when the user selects tabs, presses the overflow icon or uses keyboard controls to move between tabs.

Note! It is generally recommended that before relying on the overflow you attempt other solutions first. For example, you can try using the small tabs variant or reducing the number of tabs in the tablist.

Daytime care for people who cannot be fully independent, such as children or elderly people.

React code example:

// TabList does not fit into this container
<div style={{maxWidth: '400px'}}>
<Tabs>
<TabList style={{marginBottom: 'var(--spacing-m)'}}>
<Tab>Daycare</Tab>
<Tab>Pre-school</Tab>
<Tab>Basic education</Tab>
<Tab>Upper secondary</Tab>
<Tab>University</Tab>
</TabList>
<TabPanel>Daytime care for people who cannot be fully independent, such as children or elderly people.</TabPanel>
<TabPanel>...</TabPanel>
<TabPanel>...</TabPanel>
<TabPanel>...</TabPanel>
<TabPanel>...</TabPanel>
</Tabs>
</div>

Demos & API

Core

Not included in hds-core!

React

Tabs in hds-react

Tabs API