Tabs

Introduction

Tabs allows you to specify a user-selectable collection of different pieces of content to display. A Tab element represents both the title of the tab inside the tab bar as well as the content that the tab corresponds to.

Tabs can be used in controlled mode by providing selectedTabId and onChange props, or in uncontrolled mode by optionally providing defaultSelectedTabId and onChange. The Tab child components are then managed by the Tabs component. Clicking one will change selection by triggering the onChange property of the controlling Tabs component. Arbitrary other children are simply rendered in order; interactions are your responsibility.

Examples

You have selected React.

Usage

Tabs

Tabs is the top-level component responsible for rendering the tab list and coordinating selection. It can be used in controlled mode by providing selectedTabId and onChange props, or in uncontrolled mode by optionally providing defaultSelectedTabId and onChange.

Children of the Tabs are rendered in order in the tab list, which is a flex container. Tab children are managed by the component; clicking one will change selection. Arbitrary other children are simply rendered in order; interactions are your responsibility.

Insert a <Tabs.Expander /> between any two children to right-align all subsequent children (or bottom-align when vertical).

Tab

Tab is a minimal wrapper with no functionality of its own — it is managed entirely by its parent Tabs wrapper. Tab title text can be set either via title prop or via React children (for more complex content).

The associated tab panel will be visible when the Tab is active. Omitting panel is supported and can be useful when you want the associated panel to appear elsewhere in the DOM (by rendering it yourself as needed).

API Reference

Tabs

Prop NameRequired?TypeDescription
animatefalsebooleanWhether the selected tab indicator should animate its movement.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
defaultSelectedTabIdfalseTabIdInitial selected tab `id`, for uncontrolled usage. Note that this prop refers only to `<Tab>` children; other types of elements are ignored.
idtrueTabIdUnique identifier for this `Tabs` container. This will be combined with the `id` of each `Tab` child to generate ARIA accessibility attributes. IDs are required and should be unique on the page to support server-side rendering.
largefalsebooleanIf set to `true`, the tab titles will display with larger styling. This will apply large styles only to the tabs at this level, not to nested tabs.
renderActiveTabPanelOnlyfalsebooleanWhether inactive tab panels should be removed from the DOM and unmounted in React. This can be a performance enhancement when rendering many complex panels, but requires careful support for unmounting and remounting.
selectedTabIdfalseTabIdSelected tab `id`, for controlled usage. Providing this prop will put the component in controlled mode. Unknown ids will result in empty selection (no errors).
verticalfalsebooleanWhether to show tabs stacked vertically on the left side.

Tab

Prop NameRequired?TypeDescription
childrenfalseReact.ReactNodeContent of tab title, rendered in a list above the active panel. Can also be set via the `title` prop.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
disabledfalsebooleanWhether the tab is disabled.
idtrueTabIdUnique identifier used to control which tab is selected and to generate ARIA attributes for accessibility.
panelfalseElementPanel content, rendered by the parent `Tabs` when this tab is active. If omitted, no panel will be rendered for this tab.
panelClassNamefalsestringSpace-delimited string of class names applied to tab panel container.
titlefalseReact.ReactNodeContent of tab title element, rendered in a list above the active panel. Can also be set via React `children`.

Related Reading

Blueprint Reference
Panel Stack