Cognition

Components

Accordion

A vertically stacked set of interactive headings that each reveal a section of content. Keyboard accessible, focus managed, and screen reader compatible. type controls whether one or many sections stay open.

Preview

Click Forgot Password on the login page, enter your email address, and we'll send you a link to reset it. The link expires in 24 hours.

Rendered with live Cognition tokens: item borders, the chevron, and text remap on theme change, no dark: classes. Expand/collapse uses the animate-accordion-* utilities.

Variants

Click Forgot Password on the login page, enter your email address, and we'll send you a link to reset it. The link expires in 24 hours.

<Accordion type="single" collapsible defaultValue="item-0">
  <AccordionItem value="item-0">
    <AccordionTrigger>How do I reset my password?</AccordionTrigger>
    <AccordionContent>Click Forgot Password…</AccordionContent>
  </AccordionItem>
  {/* …more items */}
</Accordion>

Click Forgot Password on the login page, enter your email address, and we'll send you a link to reset it. The link expires in 24 hours.

<Accordion
  type="single"
  collapsible
  className="rounded-lg border border-border-default"
>
  <AccordionItem value="item-0" className="px-4 last:border-b-0">
    <AccordionTrigger>How does billing work?</AccordionTrigger>
    <AccordionContent>We offer monthly and annual plans…</AccordionContent>
  </AccordionItem>
</Accordion>
Subscription & Billing
Common questions about your account, plans, and payments.

Click Forgot Password on the login page, enter your email address, and we'll send you a link to reset it. The link expires in 24 hours.

<Card>
  <CardHeader>
    <CardTitle>Subscription &amp; Billing</CardTitle>
    <CardDescription>Common questions about your account.</CardDescription>
  </CardHeader>
  <CardContent>
    <Accordion type="single" collapsible>
      <AccordionItem value="item-0">…</AccordionItem>
    </Accordion>
  </CardContent>
</Card>

The base accordion is borderless: items are divided by a single rule. Wrap it in a rounded border for a self-contained block, or drop it into a Card alongside a header.

States

Click Forgot Password on the login page, enter your email address, and we'll send you a link to reset it. The link expires in 24 hours.

Yes: upgrade or downgrade at any time from Billing. Changes are prorated against your current cycle.

<Accordion type="multiple" defaultValue={["item-0", "item-1"]}>
  …
</Accordion>

<AccordionItem value="item-1" disabled>
  <AccordionTrigger>Can I change my plan?</AccordionTrigger>
</AccordionItem>

type="multiple" lets several sections stay open at once; a disabled item dims to 50% and stops toggling. An open trigger rotates its chevron 180°.

API

Prop
Type
Default
Description
type
"single" | "multiple"
required
single allows one open item at a time; multiple lets several stay open.
collapsible
boolean
false
single only: lets the open item close again so all can be collapsed.
defaultValue
string | string[]
undefined
Item value(s) open on mount. Use value + onValueChange to control it.
AccordionItem value
string
required
Unique id for the item. Used by type / defaultValue reference.
AccordionItem disabled
boolean
false
Disables the trigger; it dims to 50% and stops responding.

Don't and Do

Don't

Don't hide content a user always needs behind an accordion, and don't nest interactive controls in the trigger. The whole header is the toggle. Reach for it to condense long, optional sections like an FAQ, not to bury primary content.

Do
<Accordion type="single" collapsible>
  <AccordionItem value="reset">
    <AccordionTrigger>How do I reset?</AccordionTrigger>
    <AccordionContent>Click Forgot Password…</AccordionContent>
  </AccordionItem>
</Accordion>
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export function Faq() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="reset">
        <AccordionTrigger>How do I reset my password?</AccordionTrigger>
        <AccordionContent>
          Click Forgot Password on the login page…
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
API matches fe-distillery/components/ui/accordion.tsx Accordion, AccordionItem, AccordionTrigger, AccordionContent. The bare border and muted chevron are replaced with Cognition tokens; the bordered and in-card layouts are compositions.