Examples

Simple

The template renders the whole tablist / tab / tabpanel structure. label names the tab list, list_attr styles it, and the selected tab is the one CSS selects with [aria-selected="true"] — the component writes no inline style.

Transitioned panels

Tabs calls enter() and leave() on the Transition and ViewTransition components inside each panel, and hides the closing panel only once its transitions have resolved. This replaces the styles option of v1.

This example also uses data-option-activation="manual", so the arrow keys move the focus and Enter or Space switches the panel.