Tab

The Tab component is used for navigating frequently accessed, but distinct categories.

Accessibility

  • tab, shift + tab - to move focus between tabs.
  • Space or Enter - to display the selected tab's content
  • aria-selected, aria-disabled are applied to the tabs.
  • Roles: role=tab, role=tablist, role=tabpanel

Tab Basic Usage

Tab 1 content

Tab Vertical Usage

Tab 3 content

Tab Controlled Usage

Content:
Tab Content 1

Overrides

Additionally, you can fully customize any part of the Tabs through the overrides prop. The Tabs consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

Tab 1 content

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

Tabs API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

StatefulTabs API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

Tab API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>