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
AngularEmberReactBackboneYou 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 Name | Required? | Type | Description |
---|---|---|---|
animate | false | boolean | Whether the selected tab indicator should animate its movement. |
className | false | string | A space-delimited list of class names to pass along to a child element. |
defaultSelectedTabId | false | TabId | Initial selected tab `id`, for uncontrolled usage. Note that this prop refers only to `<Tab>` children; other types of elements are ignored. |
id | true | TabId | Unique 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. |
large | false | boolean | If 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. |
renderActiveTabPanelOnly | false | boolean | Whether 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. |
selectedTabId | false | TabId | Selected tab `id`, for controlled usage. Providing this prop will put the component in controlled mode. Unknown ids will result in empty selection (no errors). |
vertical | false | boolean | Whether to show tabs stacked vertically on the left side. |
Tab
Prop Name | Required? | Type | Description |
---|---|---|---|
children | false | React.ReactNode | Content of tab title, rendered in a list above the active panel. Can also be set via the `title` prop. |
className | false | string | A space-delimited list of class names to pass along to a child element. |
disabled | false | boolean | Whether the tab is disabled. |
id | true | TabId | Unique identifier used to control which tab is selected and to generate ARIA attributes for accessibility. |
panel | false | Element | Panel content, rendered by the parent `Tabs` when this tab is active. If omitted, no panel will be rendered for this tab. |
panelClassName | false | string | Space-delimited string of class names applied to tab panel container. |
title | false | React.ReactNode | Content of tab title element, rendered in a list above the active panel. Can also be set via React `children`. |