Tabs

Reduce visual complexity of long forms using tabs.

#

#

#

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

#

#

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

#

  • 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.

#

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

#

#

Inherits margin props.

NameDefaultDescription

#

NameDefaultDescription
children

ReactNode

Tabs.

#

NameDefaultDescription
children

ReactNode

Tab title.

count

number

Optional count to display near the title.

#

NameDefaultDescription
children

ReactNode

Tab panels.

#

NameDefaultDescription
children

ReactNode

Tab content.

On this page

  • Example
  • Usage
  • Controlled
  • Guidelines
  • When to use
  • When not to use
  • Content
  • Props
  • Tabs
  • TabList
  • Tab
  • TabPanels
  • TabPanel