Components

Tabs

Used to alternate among related views within the same context. To navigate among unrelated views, use the Navigation component

Import

import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@outfitio/outkit';

Usage

You can render any element within Tabs, but TabList should only have Tab as children, and TabPanels should have TabPanel as children.

Tabs expects TabList and TabPanels as children. The order doesn't matter, you can have tabs at the top, at the bottom, or both.

Tab variants and color

Tabs come in 6 different variants to style the tabs: line,enclosed, enclosed-colored, soft-rounded, solid-rounded, unstyled

You can also change the color for any specific variant by passing the variantColor.

The value of variantColor must exist in the theme object, and must be a key in theme.colors that has the 100 - 900 color values.

Tab sizes

You can change the size of the tab by passing size prop. We support 3 sizes sm, md, lg

Change the tabs alignment

You can change the alignment of the TabList by passing align prop. We support 3 sizes start, center, end.

Fitted Tabs

Stretch the tab list to fit the container by passing isFitted prop.

Styling the tab states manually

In event you need to create custom styles for the tabs. Simply set the variant to unstyled, and use the _selected, _hover, _active style props.

Tabs onChange

The onChange callback returns the active tab's index whenever the user changes tabs. If you intend to control the tabs programmatically, use this with the index prop.

Make a tab initally active

If you want a tab to be initially active, simply pass the defaultIndex prop and set it to the index of that tab.

Make a Tab disabled

When a Tab is disabled, it's skipped during keyboard navigation and it's not clickable.

Controlled Tabs

Like form inputs, a tab's state can be controlled. Make sure to include an onChange as well, or else the tabs will not be interactive.

Creating custom tab components

Because TabList needs to know the order of the children, we use cloneElement to pass state internally. If you want to know if a tab is active, you can wrap it, and then inspect clone props passed in.

Data Tabs

If you'd like to drive your tabs with an array instead of using the granular components, you can create your own DataTabs component.

Accessibility

Keyboard

Key	Action
`ArrowLeft`	Moves focus to the next tab
`ArrowUp`	Moves focus to the previous tab
`Tab`	When focus moves into the tab list, places focus on the active tab element
`Space` or `Enter`	Activates the tab if it was not activated automatically on focus
`Home`	Moves focus to the first tab
`End`	Moves focus to the last tab

ARIA roles

Component	Aria	Usage
Tab	`role="tab"`	Indicates that it's a tab
	`aria-selected`	Set to `true` a tab is selected and all other Tabs have it set to `false`.
	`aria-controls`	Set to the `id` of its associated `TabPanel`
TabList	`id`	The `id` of the `TabPanel` that's referencd by its associated `Tab`
	`aria-orientation`	Set to vertical or horizontal based on the value of the `orientation` prop.
	`role="tablist"`	Indicates that it's a tablist
	`aria-labelledby`	Set to the `id` of the `Tab` that labels the `TabPanel`.

Best Practice

Tabs should:

Have short and scannable labels - ideally no more than two words
Represent the same kind of content. Don’t use tabs to group content that is dissimilar
Only be active one at a time
Not force users to jump back and forth to do a single task
Never be used for primary navigation
Not be used for long lists of navigation items, which may not fit on smaller screens

Props

Tabs Props

Tabs composes Box so you call pass all Box related props.

Name	Type	Default	Description
`onChange`	`(index: number) => void`		The callback to update the active tab index.
`index`	`number`		The controlled index of the tabs.
`defaultIndex`	`number`		The index of the initial active tab.
`isManual`	`boolean`		If `true`, keyboard navigation changes focus between tabs but doens't activate it. User will have to press `Enter` to active it
`children`	`React.ReactNode`		The children of the switch.
`variant`	`line`,`enclosed`,`enclosed-colored`, `soft-rounded`, `solid-rounded`, `unstyled`	`line`	The visual style of the tab.
`variantColor`	`string`		The primary color to use for the selected variant. Use a color key in `theme.colors`
`size`	`sm`, `md`, `lg`	`md`	The visual size of the tabs
`orientation`	`horizontal`, `vertical`	`horizontal`	The orientation of the tabs
`isFitted`	`boolean`		If `true`, the tabs will stretch to fill the available space

Tab Props

Name	Type	Default	Description
`isDisabled`	`boolean`		If `true`, the tab will be disabled