Tabs

Tabs follow the WAI-ARIA tabs pattern. The tab list, tabs and panels are plain elements with ARIA roles, no class needed. A small script moves the selection (it is at the end of this page). The radio variant needs no script.

Account settings

Disabled tab

Use aria-disabled="true", not disabled, so the tab stays focusable.

Launch dashboard, 12 open tasks, next release on Friday.

Vertical

Add aria-orientation="vertical" to the tab list. Up and Down arrows move the selection.

General

Workspace name, default language and time zone.

Many tabs

The list scrolls sideways when it does not fit. Arrow keys bring the focused tab into view.

Monthly recurring revenue is up 4.2% since September.

Inside a card

Invoice INV-2041

Total due: EUR 249.00. Paid on 2 October by card.

Without JavaScript

Radios and labels in pairs, then one panel per pair, inside an element with data-tabs. The browser handles selection and arrow keys. Up to ten tabs. Give every group its own radio name.

Growth is EUR 24.90 per seat each month. Cancel any time.

Growth is EUR 249 per seat each year, two months free.

Starter has 3 seats, Growth has 10, Scale has no limit.

Legacy plans are not offered to new workspaces.