primitive · tabs

Tabs

A progressively enhanced tab set with automatic activation, roving focus and useful in-page links as its static fallback.

Install with npx @madojs/ui@latest add tabs.

Primitive

Left and Right move through this horizontal set and activate the focused tab immediately.

Update the public name, contact address and preferred language for this account.

Choose which product activity is delivered by email or shown only inside the application.

Review the current plan, invoicing address and next renewal date.

A vertical set uses Up and Down while keeping the same native-link fallback and one active panel.

Configure the workspace name, regional defaults and visibility.

Review membership and the application-owned roles assigned to each person.

Inspect the services that can exchange data with this workspace.

Composition

Author useful in-page links inside a labelled tabs list and matching section targets, then attach madoUiTabs().root.

export madoUiTabs(): Returns the root ref for progressive tab semantics and roving focus.
class mado-ui-tabs / list / tab / panels / panel: Required root, navigation and panel composition.
attribute data-orientation: Optional vertical orientation; horizontal is the default.
attribute aria-disabled: Keeps an unavailable tab out of activation while retaining the set.

The enhanced relationship owns tablist, tab, tabpanel, selected state and labelled panel semantics.
Every authored link remains a useful fragment navigation fallback before enhancement.

Horizontal sets use Left/Right; vertical sets use Up/Down; Home and End reach edges; activation follows focus.

Exactly one enabled tab participates in the Tab sequence; arrow navigation uses roving focus.

Without enhancement, all panel sections remain available through ordinary in-page links.

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.