Tabs

Tabs limit visible content by separating it into multiple panels. Only one panel is visible at a time, while all corresponding tabs are always visible — to switch from one panel to another, the corresponding tab has to be selected.

Import#

import { Tabs } from '@volue/wave-react';

// you may also access Tabs context via hook:
// import { useTabsContext } from '@volue/wave-react';

Tabs is a compound component that consists of multiple parts :

Tabs: The wrapper that contains all other parts and provides context for them.
Tabs.List: The wrapper that holds tabs triggers (buttons).
Tabs.Trigger: The button that opens its associated panel with content and indicates active tab.
Tabs.TriggerLabel: The wrapper for trigger's textual label. It renders a visibly hidden "copy" of the trigger text in bold, reserving box space for when trigger text becomes bold on selected.
Tabs.Content: The wrapper that contains the content associated with a trigger.

Examples#

Basic#

Usually initial state of Tabs is having one trigger active and showing matching content. When you do not need to control the state of the tabs, use defaultValue attribute that should match one of the trigger's value prop.

Controlled Tabs#

You can easily make the tabs controlled, by passing your own state to value prop. onValueChange handler is called when the value changes, allowing you to sync state.

Disabled Tabs#

A Tabs.Trigger component can take a isDisabled prop. When a Tab is disabled, it is skipped during keyboard navigation and it is not clickable. The corresponding Tabs.Content component's content will be permanently hidden.

Tabs with manual activation#

By default, Tabs are activated automatically. This means when you use the arrow keys to change tabs, the tab is activated and focused.

The other approach is manual tab activation, which means focus is moved without activating the tabs. With focus on a specific tab, users can activate it by pressing Space or Enter.

Complex triggers#

Tabs.Trigger can accomodate various content. You can render any element within the trigger such as an icon or a label.

Use Tabs.TriggerLabel to wrap text content of Tabs.Trigger when trigger contains more than simple text.

Tabs.TriggerLabel renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected.

Sizes#

Tabs comes in two size variants: medium and small. By default, it uses medium size, but you can switch it to the small size to decrease the size of the triggers.

Accessibility features#

Tabs provide deep keyboard interactions.
Tabs components follow the WAI-ARIA Tabs design pattern, semantically linking tabs and their associated tab panels.

Keyboard support#

tab when focus moves into the tab list, places focus on the active tab element. When a trigger is focused, moves focus to the active content.
← moves focus to the previous tab.
→ moves focus to the next tab.
home moves focus to the first tab.
end moves focus to the last tab.
Space or Enter activates the tab if it was not activated automatically on focus.

API Reference#

Tabs#

Prop	Type	Default
`defaultValue`	`string`	No default value
`value`	`string`	No default value
`onValueChange`	`function`	No default value
`activationMode`	`enum`	`"automatic"`
`size`	`enum`	`medium`

Tabs.List#

Prop	Type	Default
`css`	`StitchesCss`	No default value
`loop`	`boolean`	`true`
`withDivider`	`boolean`	`true`

Tabs.Trigger#

Prop	Type	Default
`as`	`enum`	`button`
`css`	`StitchesCss`	No default value
`value`*	`string`	No default value
`isDisabled`	`boolean`	`false`

Tabs.TriggerLabel#

Prop	Type	Default
`as`	`enum`	`span`
`css`	`StitchesCss`	No default value

Tabs.Content#

Prop	Type	Default
`as`	`enum`	`div`
`css`	`StitchesCss`	No default value
`value`*	`string`	No default value