Tabs

Tabs are used to organize content by grouping similar information on the same page.

Neutral selected states

When the platform-dst-tokens-finesse feature flag is enabled, this component uses the new neutral treatment for selected states.

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/tabs`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/tabs, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

Tabs props

`analyticsContext`
Description	Additional information to be included in the `context` of analytics events that come from `Tabs`.
Type	`{ [x: string]: any; }`

`children`
Required
Description	The children of Tabs. The first child should be a `TabList` filled with `Tab`'s. Subsequent children should be `TabPanel`'s. There should be a `Tab` for each `TabPanel`. If you want to customize `Tab` or `TabPanel`, refer to the examples in the documentation.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`createAnalyticsEvent`
Description	You should not be accessing this prop under any circumstances. It is provided by `@atlaskit/analytics-next` and integrated in the component
Type	`(payload: AnalyticsEventPayload) => UIAnalyticsEvent`

`defaultSelected`
Description	The index of the tab that will be selected by default when the component mounts. If not set the first tab will be displayed by default.
Type	`number`

`id`
Required
Description	A unique ID that will be used to generate IDs for tabs and tab panels. This is required for accessibility purposes.
Type	`string`

`onChange`
Description	A callback function which will be fired when a changed. It will be passed the index of the selected tab and a `UIAnalyticsEvent`.
Type	`(index: number, analyticsEvent: UIAnalyticsEvent) => void`

`ref`
Description	No description.
Type	`((instance: any) => void) \| RefObject<any>`

`selected`
Description	The selected tab's index. If this prop is set the component behaves as a controlled component. It will be up to you to listen to `onChange`.
Type	`number`

`shouldUnmountTabPanelOnChange`
Description	Tabs by default leaves `TabPanel`'s mounted on the page after they have been selected. If you would like to unmount a `TabPanel` when it is not selected, set this prop to be true.
Type	`boolean`

`testId`
Description	A `testId` prop is a unique string that appears as a data attribute `data-testid` on the `Tabs` element, serving as a hook for automated tests.
Type	`string`

Tab props

`children`
Required
Description	The children to be rendered within a `Tab`.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`testId`
Description	A `testId` prop is is a unique string that appears as a data attribute `data-testid` on the `Tab` element, serving as a hook for automated tests.
Type	`string`

Tab panel props

`children`
Required
Description	The children to be rendered within a `TabPanel`.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`testId`
Description	A `testId` prop is is a unique string that appears as a data attribute `data-testid` on the `TabPanel` element, serving as a hook for automated tests.
Type	`string`

Hooks

useTab

useTab will return an object of type TabAttributesType.

`aria-controls`
Required
Description	The ID of the tab panel that this tab links.
Type	`string`

`aria-posinset`
Required
Description	The position of this tab within the tab list.
Type	`number`

`aria-selected`
Required
Description	Whether this tab is selected.
Type	`boolean`

`aria-setsize`
Required
Description	The number of tabs in this tab list.
Type	`number`

`id`
Required
Description	ID of the tab.
Type	`string`

`onClick`
Required
Description	Changes the selected tab.
Type	`() => void`

`onKeyDown`
Required
Description	Allows navigation of tabs with automatic activation. Read here for more details: https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html
Type	`(e: KeyboardEvent<HTMLElement>) => void`

`role`
Required
Description	Role is "tab".
Type	`"tab"`

`tabIndex`
Required
Description	If the tab is selected the tab index is 0 and is focusable. Otherwise it is -1 and is not focusable.
Type	`number`

useTabPanel

useTabPanel will return an object of type TabPanelAttributesType.

`aria-labelledby`
Required
Description	The id of the tab that links to this tab panel.
Type	`string`

`hidden`
Description	Hidden is true if it is not the selected tab.
Type	`boolean`

`id`
Required
Description	ID of the the tab panel.
Type	`string`

`role`
Required
Description	Role is "tabpanel".
Type	`"tabpanel"`

`tabIndex`
Required
Description	If the tab panel is selected the tab index is 0 and is focusable. Otherwise it is -1 and is not focusable.
Type	`number`

Was this page helpful?

We use this feedback to improve our documentation.

Tabs

Neutral selected states

Installation

Props

Tabs props

`analyticsContext`

`children`

`createAnalyticsEvent`

`defaultSelected`

`id`

`onChange`

`ref`

`selected`

`shouldUnmountTabPanelOnChange`

`testId`

Tab props

`children`

`testId`

Tab panel props

`children`

`testId`

Hooks

useTab

`aria-controls`

`aria-posinset`

`aria-selected`

`aria-setsize`

`id`

`onClick`

`onKeyDown`

`role`

`tabIndex`

useTabPanel

`aria-labelledby`

`hidden`

`id`

`role`

`tabIndex`

Was this page helpful?