alder-ui demos

al-tabs

Tabs backed by a radio group: they work with no script; the script builds the ARIA tabs pattern from them: a tablist of button role=tab (aria-selected, aria-controls, a roving tabindex) before the panels, the labels hidden, tabpanel with aria-labelledby. al-tab holds a label with a radio and its al-panel.

Without JavaScript

The radio group selects the tab and the arrow keys move between tabs; the server writes checked on the radio it picks.

The overview panel. The details panel.

With variant="line" the checked label is underlined; without the script there is no muted pill (the labels and panels share one flex row).

The overview panel. The details panel.

Enhanced

With the script: the ARIA roles and states, Home and End, selected picks the open tab (here the second), and a name on the tab supplies the radio's group.

Three posts. Twelve comments (selected by the server). Settings live here.

Line

variant="line" drops the muted pill and underlines the active tab.

The overview panel. The details panel.