Tabs

The stepper is no longer a Tabs variant: a fixed, ordered process is shown with StepIndicator (C-47), which marks the current step with aria-current="step" and says in text which steps are complete.

Icon-only tabs with tooltips for the Format panes (Fill & Line, Effects, Size & Properties, Picture).

Guidance

When to use

• Split one record or object into peer views, such as Properties, Documents and History, where only one view shows at a time.
• Filter one collection into named slices, such as All, Mine and Overdue, with the pill variant and a __badge count.
• Switch the time scale or mode of a single view with the segmented variant.
• Put a settings area's sections down the side with the vertical variant, or icon-only pane sections with data-variant="icon" in the editors.

When to consider something else

• When users need to compare the sections or read several at once, use Accordion or a plain page instead of hiding them behind tabs. See Accordion.
• When the choice toggles a setting or pressed state rather than swapping a panel, use a segmented Button group with aria-pressed. See ButtonGroup.
• When there are more sections than fit on one row, or they nest, use Tree or the shell navigation. See Tree.
• When the slices are saved searches or filters the user can add and remove, use Chips. See Chip.
• When the views are steps of a process the user must complete in order, use Step indicator above each step's page; Tabs no longer has a stepper variant. See StepIndicator.

Usability

Accessibility

Keyboard

Roles and names

• .qf-tabs__list has role="tablist"; each .qf-tabs__tab is a button with role="tab" and aria-selected.
• Each tab points to its panel with aria-controls; each .qf-tabs__panel has role="tabpanel" and must have aria-labelledby naming its tab (the icon specimen does; the binding must always add it).
• Give the tab list an aria-label when there is no visible heading for it, as the Format shape icon tabs do.
• A disabled tab uses aria-disabled="true", is skipped by the arrow keys and ignores clicks.

Focus

• Only the selected tab is in the Tab order (roving tabindex 0 and -1); the arrow keys move focus within the list.
• Focus shows the shared focus ring on the tab (:focus-visible).
• Switching tabs does not move focus into the panel; if a panel has no focusable content, give it tabindex="0" so keyboard users can reach and scroll it.

Other requirements

• The selected tab is marked by an underline, fill or position, not color alone (1.4.1); its indicator needs 3:1 against the background (1.4.11).
• Tabs are 2.5rem high and segmented items use the small control height, so targets meet 2.5.8.
• Panels that load slowly should show a Progress or Skeleton and announce errors, not leave an empty panel.
• At 320px width (1.4.10) a long tab row must scroll or collapse into Overflow, not clip labels.

Test your implementation too. This guidance covers the element as specified here. How a screen composes it (labels, order, announcements) still needs its own keyboard and screen reader check.

Accessibility tests

Passed the gate (run 358b316 on 2026-10-22): no finding in any theme. Awaiting a person’s approval of the checklist below.

Approving. When the checklist passes on the checked run, record it with bun run a11y:approve -- tabs --by "Your name" and commit a11y/approvals.json with the rebuilt pages. All test status

Package

Consumers link one stylesheet, css/classic/index.css, which includes every element. The files below are where this element is defined.

Latest updates

All release notes