Tabs

The common case: a view switch over a patient chart, with a critical count on Labs that reaches the accessible name as a word.

import { Tabs } from "@oxygenui-design/tabs";
import { allergyList, medicationList, observationPanel } from "@oxygenui-design/fixtures";
import "@oxygenui-design/tabs/styles.css";

const critical = observationPanel.filter(isCritical);

<Tabs
  as="tabs"
  aria-label="Chart sections"
  defaultValue="summary"
  items={[
    { value: "summary", label: "Summary", children: <Summary /> },
    {
      value: "labs",
      label: "Labs",
      // Counted from the data, never typed in. A tone is a claim about the
      // patient, so it has to come from the same place the panel does.
      count: critical.length,
      tone: critical.length ? "critical" : "neutral",
      children: <Labs observations={observationPanel} />,
    },
    { value: "meds", label: "Medications", count: medicationList.length, children: <Meds /> },
    { value: "allergies", label: "Allergies", count: allergyList.length, children: <Allergies /> },
  ]}
/>;

A disabled tab requires a reason. Omitting the section entirely would tell the clinician it does not exist; greying it silently tells them nothing.

import { patientRestricted } from "@oxygenui-design/fixtures";

<Tabs
  as="tabs"
  aria-label="Chart sections"
  defaultValue="summary"
  items={[
    { value: "summary", label: "Summary", children: <Summary /> },
    {
      value: "bh",
      label: "Behavioural health",
      disabled: true,
      // Mandatory. aria-disabled, never the disabled attribute — a keyboard
      // user has to be able to reach it to find out why they cannot open it.
      disabledReason:
        "Restricted. Opening it records an access event and notifies the record owner.",
    },
  ]}
/>;

Not every tab strip is a view switch. A filter is a form control and belongs in a Form.Item, which is what `as="radiogroup"` declares.

import { Form } from "antd";

<Form.Item name="density" label="Density">
  <Tabs
    as="radiogroup"
    variant="segmented"
    items={[
      { value: "compact", label: "Compact" },
      { value: "default", label: "Default" },
      { value: "comfortable", label: "Comfortable" },
    ]}
  />
</Form.Item>;