Edit this page
[?] Component size, gzipped: 24kb

Tabs

The Tabs component is used for navigating frequently accessed, but distinct categories.

Accessibility

  • tab, shift + tab - to move focus between tabs.
  • Space or Enter - to display the selected tab's content
  • aria-selected, aria-disabled are applied to the tabs.
  • Roles: role=tab, role=tablist, role=tabpanel

Examples

Controlled Tabs Usage

Tab Content 1

Uncontrolled Tabs Usage

Tab 1 content

Tabs SEO Friendly

Tab 1 content
Tab 2 content
Tab 3 content

Tabs Vertical Usage

Tab 3 content

Tabs Overrides

Tab Content 1

Overrides

Additionally, you can fully customize any part of the Tabs through the overrides prop. The Tabs consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

Tab 1 content

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

API

Tabs API

children ChildrenArray<Element<any>> required

An array of Tab components. eslint-disable-next-line flowtype/no-weak-types

ChildrenArrayElementany

activeKey Key required

Key of the the tab to be selected.

Key

disabled boolean = false

If set to true all its tabs will be disabled

onChange function = () => undefined

Change handler that is called every time a new tab is selected

activeKey required Key
 => mixed

orientation $Values<typeof ORIENTATION> =

Sets the orientation of the Tab component

$Values{ horizontal: "horizontal", vertical: "vertical" }

renderAll boolean = false

Renders all tab content for SEO purposes regardless of tab active state

overrides { Root: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, TabBar: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, TabContent: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }<$Diff<object, object>> = {}

{ Root: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, TabBar: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, TabContent: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }$Diff
$disabled boolean
$active boolean
$orientation $Values{ horizontal: "horizontal", vertical: "vertical" }
,
$active nullable boolean

StatefulTabs API

initialState object

Initial state of the component

activeKey required Key

stateReducer function = (type, newState) => undefined

A state change handler.

function
$Keys{ change: "change" },
activeKey required Key
,
activeKey required Key
=>
activeKey required Key

Tab API

children Node

Node

disabled boolean = false

Sets the tab to disabled

active boolean

key Key

Unique key for the tab. Defaults to the child index.

Key

onClick function = () => undefined

onClick handler for the Tab element

Event => mixed

onKeyDown function = () => undefined

onKeyDown handler for the Tab element

KeyboardEvent => mixed

onSelect function = () => undefined

onSelect handler for the Tab element

() => mixed

overrides { Tab: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }<object>

{ Tab: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }
$disabled boolean
$active boolean
$orientation $Values{ horizontal: "horizontal", vertical: "vertical" }

title Node = ""

Title of the Tab to be shown in the Tab bar

Node

id string

$orientation $Values<typeof ORIENTATION>

$Values{ horizontal: "horizontal", vertical: "vertical" }

Tabs exports

You can import this module like so:

import {Tabs} from 'baseui/tabs'

It exports the following components or utility functions:

  • Tabs
  • StatefulTabs
  • Tab
  • ORIENTATION
  • STATE_CHANGE_TYPE
  • StyledRoot
  • StyledTab
  • StyledTabBar
  • StyledTabContent