These interactions are intended to fulfill the WAI-ARIA Tab Panel Design Pattern.
The following tab component maintains its own internal state and allows letter-key navigation.
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.
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.
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.
Return to the repository.