Tabs
Tabs organise navigation between multiple pages or content sections.

Usage

Tabs compound component consists of multiple subcomponents: List, Item and Panel that should be used together. Each Item and Panel should have matching ids that are unique within the Tabs parent. As you can see, every Item has an icon and children support.

Variants

Tabs support pills and borderless variants. borderless is helpful when it's used with parent component that provides its own border already.

pills variant is used for less prominent secondary navigation.

Controlled/uncontrolled id

If you provide defaultActiveId to the component – it will select a tab on component mount and will keep the default selection logic later on.

If you provide activeId – controlled mode will be turned on, and you will have to change the state of the component manually. This will still call the onChange handler, so it lets you customize the selection logic, for instance you can fetch data for the tab before making it active.

Equal width tab items

You can stretch the tab items to keep their width equal to each other with itemWidth property.

Panel composition

Panels don't have to be located at the top-level of the component. You can place them literally anywhere inside the Tabs scope and they will still work as expected.

This approach lets you easily customize their styles and animate their appearance using 3rd-party libraries.

Accessibility

Tabs components provides all required aria- attributes and roles to its elements. To provide a description to the tablist element, you can use attributes={{ 'aria-label': 'Tabs label' }}.

Keyboard navigation:

  • Pressing Tab will place the focus on the active tab item when focus moves into the tab list
  • Left and right arrow keys move focus across tab items
  • Space and Enter select the focused tab
  • Home moves focus to the first tab item
  • End moves focus to the last tab item

Properties

Tabs properties:

NameTypeDefaultRequiredComment
onChange({ id }) => {}-falseTab change handler
variantborderless, pills-false
childrenReactNode-false
itemWidthequal-false
activeIdstring, number-falseControlled id value
defaultActiveIdstring, number-falseUncontrolled id state

Tabs.List properties:

NameTypeDefaultRequiredComment
childrenReactNode-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element

Tabs.Item properties:

NameTypeDefaultRequiredComment
childrenReactNode-false
idstring, number-false
iconReactNode-false

Tabs.Panel properties:

NameTypeDefaultRequiredComment
childrenReactNode-false
idstring, number-false