Tabs

mq-tabs is a compound primitive: a wrapper, a list of triggers, and one panel per trigger. It ships from @mediquo/ui as custom elements and as React components.

Install

// Custom elements — the import registers <mq-tabs> and friends
import "@mediquo/ui/components/tabs";

// React
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@mediquo/ui/react/tabs";

Accessibility

• The wrapper wires aria-controls and aria-labelledby between each trigger and its panel, generating ids where they are missing.
• label on the list is its accessible name; orientation is reflected as aria-orientation.
• Only the selected trigger is in the tab order — arrows move between triggers, Home and End jump to the ends, and disabled triggers are skipped.
• activationMode="manual" separates moving focus from selecting, which is the right choice when revealing a panel is expensive.

Behaviour worth knowing

• A trigger whose value matches no panel controls nothing, so the component warns about it in the console rather than failing silently.
• With no value or defaultValue, the first trigger wins.