Tab
The Tab component is used for navigating frequently accessed, but distinct categories.
Accessibility
tab
,shift + tab
- to move focus between tabs.Space
orEnter
- to display the selected tab's contentaria-selected
,aria-disabled
are applied to the tabs.- Roles:
role=tab
,role=tablist
,role=tabpanel
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:
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>