This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

Tabs

Tabs is a component that makes navigating between sections of related content possible, displaying one section at a time.

Table of contents

How to use Tabs

Use Tabs if the content can be separated into sections that make sense as standalone pieces of information. Be aware that the users will not see all the content at the same time. Make sure the first section is the most relevant one.

Code examples

Controlled Tabs

with vertical divider

Content recommendations

  • every Tab should have concise copy
  • all content within a Tab should be related to it's label
  • to ensure an optimal cognitive load for users, do not use more than six (6) Tabs at any given time

Props

Tabs

NameRequiredDefaultTypeDescription
currentTabstring
defaultTabstring
onTabChange(tab: string) => void
childrenReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdstringA [data-test-id] attribute used for testing purposes

Tab

NameRequiredDefaultTypeDescription
panelIdrequiredstringA unique id that associates the tab with a panel.
isDisabled
false
true
When true, prevents the user from interacting with the tab.
childrenrequiredReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdstringA [data-test-id] attribute used for testing purposes

TabPanel

NameRequiredDefaultTypeDescription
idrequiredstring
childrenrequiredReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdstringA [data-test-id] attribute used for testing purposes

TabList

NameRequiredDefaultTypeDescription
looptrue
false
true
When true, keyboard navigation will loop from last tab to first, and vice versa.
variant
"default"
"horizontal-divider"
"vertical-divider"
visual variant of TabList
childrenReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdstringA [data-test-id] attribute used for testing purposes