Accordion

Demos

One item open at a time. The first item starts open.

Yes. Fast for 10 to 12 hours. Water is fine.

"use client"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@workspace/ui/components/accordion"

export function AccordionDemo() {
  return (
    <Accordion defaultValue={["fasting"]} className="w-full max-w-md">
      <AccordionItem value="fasting">
        <AccordionTrigger>Do I need to fast before the test?</AccordionTrigger>
        <AccordionContent>
          Yes. Fast for 10 to 12 hours. Water is fine.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="results">
        <AccordionTrigger>When will my results be ready?</AccordionTrigger>
        <AccordionContent>
          Most panels are ready within 48 hours of collection.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="range">
        <AccordionTrigger>What does out of range mean?</AccordionTrigger>
        <AccordionContent>
          The value sits outside the reference range for your age and sex.
          Your report explains what to do next.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Usage

Use an accordion to shorten a long page of related sections, such as FAQs or grouped biomarkers. Do not hide content the reader needs to compare side by side. If every section matters on first read, show them all.

Import it from @workspace/ui/components/accordion.

Anatomy

Accordion — The bordered container. Holds the open state.
AccordionItem — One section. Needs a unique value.
AccordionTrigger — The heading button. The plus and minus icons are added for you.
AccordionContent — The panel that opens and closes. className goes on the inner wrapper, not the panel.

Notes

defaultValue and value are arrays, even when only one item can be open.
Keep trigger text short and specific. It is read aloud as a button.
A disabled item stays visible but cannot be opened.

Examples

Multiple

Set multiple so several items can stay open at once.

ApoB, LDL-C, HDL-C, Triglycerides.

HbA1c, Fasting glucose, Insulin.

"use client"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@workspace/ui/components/accordion"

export function AccordionMultiple() {
  return (
    <Accordion multiple defaultValue={["heart", "metabolic"]} className="w-full max-w-md">
      <AccordionItem value="heart">
        <AccordionTrigger>Heart health</AccordionTrigger>
        <AccordionContent>ApoB, LDL-C, HDL-C, Triglycerides.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="metabolic">
        <AccordionTrigger>Metabolic health</AccordionTrigger>
        <AccordionContent>HbA1c, Fasting glucose, Insulin.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="inflammation">
        <AccordionTrigger>Inflammation</AccordionTrigger>
        <AccordionContent>hs-CRP, Ferritin.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Disabled

A disabled item stays visible but cannot be opened.

"use client"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@workspace/ui/components/accordion"

export function AccordionDisabled() {
  return (
    <Accordion className="w-full max-w-md">
      <AccordionItem value="heart">
        <AccordionTrigger>Heart health</AccordionTrigger>
        <AccordionContent>ApoB, LDL-C, HDL-C, Triglycerides.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="thyroid" disabled>
        <AccordionTrigger>Thyroid (not in this panel)</AccordionTrigger>
        <AccordionContent>TSH, Free T4.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Props

These are the props you set most often. Unlisted props pass through to the underlying element.

Accordion

Prop	Type	Default	Description
`defaultValue`	`any[]`	—	Items open on first render.
`value`	`any[]`	—	Open items when controlled.
`onValueChange`	`(value) => void`	—	Called when an item opens or closes.
`multiple`	`boolean`	`false`	Allow more than one item open at once.
`disabled`	`boolean`	`false`	Disables every item.
`className`	`string`	—	Classes merged onto the element.

AccordionItem

Prop	Type	Default	Description
`value`	`any`	—	Identifies the item in the open state.
`disabled`	`boolean`	`false`	Stops this item from opening.