react-aria-tabpanel demo

Interactions to try

• With focus on the active tab, hit Left, Right, Up, and Down Arrows to move through the tabs.
• With focus on the active tab, (in some demos) type letter keys to navigate across tabs. (Not all demos because this feature is optional.)
• Tab through the page. Notice that only the active tab receives focus.
• With focus inside the active tab panel (on one of those links), Control+Up Arrow may put focus on the active tab (depending on whether your OS controls that combination).

These interactions are intended to fulfill the WAI-ARIA Tab Panel Design Pattern.

Stateful demo

The following tab component maintains its own internal state and allows letter-key navigation.

Stateless demo

The following tab component runs an onChange() function passed in from its parent, so the tab component itself is stateless. It does not allow letter-key navigation.

Dynamic Tabs demo

The following is an example of adding/removing tabs dynamically and setting the active tab programmatically via a wrapper component's state. Similar to the Stateless Demo, it does not allow letter-key navigation.

Fancier Demo

The provided Tab and TabPanel components can accept strings, elements, arrays of elements, and also functions (which receive the tab state as an argument). So anything is possible.

Here's a fancier demo, that uses some icons and transitions in the tabs, and allow letter-key navigation.

Great! What do I do now?

Return to the repository.