Tabs

Reduce visual complexity of long forms using tabs.

#Example

#Usage

#Count and badges

Add the count prop to a Tab to display a gray badge with the count within the Tab. Use this instead of directly rendering additional components within the Tab itself.

#Controlled

There are cases when state of tabs is managed elsewhere. For example, when tabs are switched based on the current URL.

#Guidelines

#When to use

• When there are many related sections and one section needs to be shown at a time.

#When not to use

• When content from multiple tabs needs to be shown at the same time.
• As a way to indicate progress of filling out a form or a similar component.
• As a way to filter content.

#Content

• Use sentence case for tab titles.
• Keep tab titles to 3 words max.

#Props

#Tabs

Inherits margin props.

Name	Default	Description

#TabList

Name	Default	Description
children	—	ReactNode Tabs.

#Tab

Name	Default	Description

#TabPanels

Name	Default	Description

#TabPanel

Name	Default	Description