Tabs

Tabs organise navigation between multiple pages or content sections.
Full keyboard navigation
Can be controlled and uncontrolled
Can be used as a form control
Works with any content


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, pills-elevated and borderless variants.

borderless is helpful when it's used with parent component that provides its own border already. For example, you can use it together with Divider component and custom padding value.

pills and pills-elevated variants can be used for less prominent secondary navigation.

Controlled/uncontrolled

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

If you provide value – 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.

Using in forms

Tabs can be used in forms as radio buttons if you pass name property to them. That will automatically will adjust their markup to native input elements and selected value will support form submit.

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:

When used as regular tabs:

  • 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

When used in forms:

  • Left and right arrow keys change the selected tab

Properties

Tabs properties:

NameTypeDefaultRequiredComment
onChange({ value, name }) => {}-falseTab change handler
variantborderless, pills, pills-elevated-false
childrenReactNode-false
itemWidthequal-false
valuestring-falseControlled value
defaultValuestring-falseUncontrolled value
namestring-falseName of the input when used in forms

Tabs.List properties:

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

Tabs.Item properties:

NameTypeDefaultRequiredComment
childrenReactNode-false
valuestring-false
iconReactNode-false

Tabs.Panel properties:

NameTypeDefaultRequiredComment
childrenReactNode-false
valuestring-false
Previous