Tabs

Reduce visual complexity of long forms using tabs.

#Example

#Usage

#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
children	—	ReactNode Tab title.
count	—	number Optional count to display near the title.

#TabPanels

Name	Default	Description
children	—	ReactNode Tab panels.

#TabPanel

Name	Default	Description
children	—	ReactNode Tab content.