react-aria-tabpanel demo

Interactions to try

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.