Tabs

StableAccessible

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

Available technologies

React

Usage
Code
Accessibility
Customisation

Code

Code examples

Default

React

Editable code examplePress Enter to start editing. Press Esc to stop editing.

import { Tabs } from 'hds-react';

() => (
  <Tabs>
    <Tabs.TabList style={{ marginBottom: 'var(--spacing-m)' }}>
      <Tabs.Tab>Daycare</Tabs.Tab>
      <Tabs.Tab>Pre-school</Tabs.Tab>
      <Tabs.Tab>Basic education</Tabs.Tab>
      <Tabs.Tab>Upper secondary</Tabs.Tab>
      <Tabs.Tab>University</Tabs.Tab>
    </Tabs.TabList>
    <Tabs.TabPanel>
      Daytime care for people who cannot be fully independent, such as children or elderly people.
    </Tabs.TabPanel>
    <Tabs.TabPanel>
      A pre-school is an educational establishment offering early childhood education to children before they begin
      compulsory education at primary school.
    </Tabs.TabPanel>
    <Tabs.TabPanel>
      The objective of basic education in Finland is to support pupils&#39; growth towards humanity and ethically
      responsible membership of society.
    </Tabs.TabPanel>
    <Tabs.TabPanel>
      Upper secondary school studies last three to four years, preparing the students for the matriculation examination.
    </Tabs.TabPanel>
    <Tabs.TabPanel>
      A high-level educational institution in which students study for degrees and academic research is done.
    </Tabs.TabPanel>
  </Tabs>
)

import { Tabs } from 'hds-react';

() => (
  <Tabs>
    <Tabs.TabList style={{ marginBottom: 'var(--spacing-m)' }}>
      <Tabs.Tab>Daycare</Tabs.Tab>
      <Tabs.Tab>Pre-school</Tabs.Tab>
      <Tabs.Tab>Basic education</Tabs.Tab>
      <Tabs.Tab>Upper secondary</Tabs.Tab>
      <Tabs.Tab>University</Tabs.Tab>
    </Tabs.TabList>
    <Tabs.TabPanel>
      Daytime care for people who cannot be fully independent, such as children or elderly people.
    </Tabs.TabPanel>
    <Tabs.TabPanel>
      A pre-school is an educational establishment offering early childhood education to children before they begin
      compulsory education at primary school.
    </Tabs.TabPanel>
    <Tabs.TabPanel>
      The objective of basic education in Finland is to support pupils&#39; growth towards humanity and ethically
      responsible membership of society.
    </Tabs.TabPanel>
    <Tabs.TabPanel>
      Upper secondary school studies last three to four years, preparing the students for the matriculation examination.
    </Tabs.TabPanel>
    <Tabs.TabPanel>
      A high-level educational institution in which students study for degrees and academic research is done.
    </Tabs.TabPanel>
  </Tabs>
)

Small

React

Editable code examplePress Enter to start editing. Press Esc to stop editing.

import { Tabs } from 'hds-react';

() => (
  <Tabs small>
    <Tabs.TabList style={{ marginBottom: 'var(--spacing-m)' }}>
      <Tabs.Tab>Daycare</Tabs.Tab>
      <Tabs.Tab>Pre-school</Tabs.Tab>
      <Tabs.Tab>Basic education</Tabs.Tab>
      <Tabs.Tab>Upper secondary</Tabs.Tab>
      <Tabs.Tab>University</Tabs.Tab>
    </Tabs.TabList>
    <Tabs.TabPanel>
      Daytime care for people who cannot be fully independent, such as children or elderly people.
    </Tabs.TabPanel>
    <Tabs.TabPanel>
      A pre-school is an educational establishment offering early childhood education to children before they begin
      compulsory education at primary school.
    </Tabs.TabPanel>
    <Tabs.TabPanel>
      The objective of basic education in Finland is to support pupils&#39; growth towards humanity and ethically
      responsible membership of society.
    </Tabs.TabPanel>
    <Tabs.TabPanel>
      Upper secondary school studies last three to four years, preparing the students for the matriculation examination.
    </Tabs.TabPanel>
    <Tabs.TabPanel>
      A high-level educational institution in which students study for degrees and academic research is done.
    </Tabs.TabPanel>
  </Tabs>
)

import { Tabs } from 'hds-react';

() => (
  <Tabs small>
    <Tabs.TabList style={{ marginBottom: 'var(--spacing-m)' }}>
      <Tabs.Tab>Daycare</Tabs.Tab>
      <Tabs.Tab>Pre-school</Tabs.Tab>
      <Tabs.Tab>Basic education</Tabs.Tab>
      <Tabs.Tab>Upper secondary</Tabs.Tab>
      <Tabs.Tab>University</Tabs.Tab>
    </Tabs.TabList>
    <Tabs.TabPanel>
      Daytime care for people who cannot be fully independent, such as children or elderly people.
    </Tabs.TabPanel>
    <Tabs.TabPanel>
      A pre-school is an educational establishment offering early childhood education to children before they begin
      compulsory education at primary school.
    </Tabs.TabPanel>
    <Tabs.TabPanel>
      The objective of basic education in Finland is to support pupils&#39; growth towards humanity and ethically
      responsible membership of society.
    </Tabs.TabPanel>
    <Tabs.TabPanel>
      Upper secondary school studies last three to four years, preparing the students for the matriculation examination.
    </Tabs.TabPanel>
    <Tabs.TabPanel>
      A high-level educational institution in which students study for degrees and academic research is done.
    </Tabs.TabPanel>
  </Tabs>
)

Overflow

React

Editable code examplePress Enter to start editing. Press Esc to stop editing.

import { Tabs } from 'hds-react';

() => (
  <div style={{ maxWidth: '400px' }}>
    <Tabs>
      <Tabs.TabList style={{ marginBottom: 'var(--spacing-m)' }}>
        <Tabs.Tab>Daycare</Tabs.Tab>
        <Tabs.Tab>Pre-school</Tabs.Tab>
        <Tabs.Tab>Basic education</Tabs.Tab>
        <Tabs.Tab>Upper secondary</Tabs.Tab>
        <Tabs.Tab>University</Tabs.Tab>
      </Tabs.TabList>
      <Tabs.TabPanel>
        Daytime care for people who cannot be fully independent, such as children or elderly people.
      </Tabs.TabPanel>
      <Tabs.TabPanel>
        A pre-school is an educational establishment offering early childhood education to children before they begin
        compulsory education at primary school.
      </Tabs.TabPanel>
      <Tabs.TabPanel>
        The objective of basic education in Finland is to support pupils&#39; growth towards humanity and ethically
        responsible membership of society.
      </Tabs.TabPanel>
      <Tabs.TabPanel>
        Upper secondary school studies last three to four years, preparing the students for the matriculation
        examination.
      </Tabs.TabPanel>
      <Tabs.TabPanel>
        A high-level educational institution in which students study for degrees and academic research is done.
      </Tabs.TabPanel>
    </Tabs>
  </div>
)

import { Tabs } from 'hds-react';

() => (
  <div style={{ maxWidth: '400px' }}>
    <Tabs>
      <Tabs.TabList style={{ marginBottom: 'var(--spacing-m)' }}>
        <Tabs.Tab>Daycare</Tabs.Tab>
        <Tabs.Tab>Pre-school</Tabs.Tab>
        <Tabs.Tab>Basic education</Tabs.Tab>
        <Tabs.Tab>Upper secondary</Tabs.Tab>
        <Tabs.Tab>University</Tabs.Tab>
      </Tabs.TabList>
      <Tabs.TabPanel>
        Daytime care for people who cannot be fully independent, such as children or elderly people.
      </Tabs.TabPanel>
      <Tabs.TabPanel>
        A pre-school is an educational establishment offering early childhood education to children before they begin
        compulsory education at primary school.
      </Tabs.TabPanel>
      <Tabs.TabPanel>
        The objective of basic education in Finland is to support pupils&#39; growth towards humanity and ethically
        responsible membership of society.
      </Tabs.TabPanel>
      <Tabs.TabPanel>
        Upper secondary school studies last three to four years, preparing the students for the matriculation
        examination.
      </Tabs.TabPanel>
      <Tabs.TabPanel>
        A high-level educational institution in which students study for degrees and academic research is done.
      </Tabs.TabPanel>
    </Tabs>
  </div>
)

Packages

Package	Included	Storybook link	Source link
HDS React	Yes	View in Storybook	View source
HDS Core	No	-	-

Properties

Note! You can find the full list of properties in the React Storybook.

**Table 1**: Tabs properties
Property	Description	Values	Default value
`initiallyActiveTab`	The initially active tab.	`number`	0
`small`	If set to true, the small tabs variant is used.	`boolean`	false
`theme`	Defines the tabs theme.	`TabsCustomTheme`	-

This component also accepts all nativediv element props.