# Accordion

A stack of headings that each open to reveal more. Pass `type="single"` (one open at a time; add `collapsible` so the open one can be closed) or `type="multiple"`. Everything is closed until the person opens it, unless the app names what starts open with `defaultValue` or `value`. Arrow keys move between headings, Home and End go to the first and last, Space or Enter opens and closes.

- Registry name: `accordion` (`@candor/accordion`)
- Tier: Free (MIT). No licence key needed.
- Docs: https://candor.themethodic.com/docs/accordion

## Install

```bash
npx candor-ui add accordion
```

Run `npx candor-ui@latest init` once first (https://candor.themethodic.com/get-started.md). Without the CLI: `npx shadcn@latest add @candor/accordion`.
It brings in: motion, render-prop, utils.
npm packages: lucide-react@^1.67.0, radix-ui@^1.8.1.

## Example

```tsx
"use client"

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

export default function Example() {
  // Everything starts closed: the person opens what they want.
  return (
    <Accordion type="single" collapsible className="w-full max-w-md">
      <AccordionItem value="what">
        <AccordionTrigger>What did the agent change?</AccordionTrigger>
        <AccordionContent>Three records in the billing table. The list is in the run's change log.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="undo">
        <AccordionTrigger>Can it be undone?</AccordionTrigger>
        <AccordionContent>Two of the three can. The third sent an email, which can't be recalled.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="who">
        <AccordionTrigger>Who approved it?</AccordionTrigger>
        <AccordionContent>No one yet. The run is waiting for a decision.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}
```

## <Accordion>

No props.

Also takes the props of `React.ComponentProps<typeof AccordionPrimitive.Root>`, `RenderProp`.

## <AccordionItem>

One heading and its panel. Give it a `value` that is unique in the accordion.

No props.

Also takes the props of `React.ComponentProps<typeof AccordionPrimitive.Item>`, `RenderProp`.

## <AccordionTrigger>

The heading that opens and closes its panel, with a chevron that turns over when open. Its children are the heading's text.

No props.

Also takes the props of `React.ComponentProps<typeof AccordionPrimitive.Trigger>`, `RenderProp`.

## <AccordionContent>

The panel. It opens and closes to the height Radix measured, so a change is seen settling rather than snapping; data-motion="none" and the OS's reduced-motion setting make it snap.

No props.

Also takes the props of `React.ComponentProps<typeof AccordionPrimitive.Content>`, `RenderProp`.

## Motion

- **open** (reveal, size): The panel grows to its measured height when opened and shrinks back when closed, in the base duration. Content the app puts in it is not animated.

Set with `--cd-motion-accordion-<moment>-*` in your brand file; the families are in the design reference.

## Rules for using Candor UI

- Components take plain typed data. Never pass model output as HTML or render it as a link; messages are typed blocks.
- A control that can't be used says why: wrap it in `<Locked reason="…">`, don't just disable it.
- Don't show a value you don't have: leave it out (it renders as —) rather than guess. An estimate is labelled as one.
- Nothing is pre-selected in a decision a person makes, and the agent is named from your app's data, never from model output.
- Your app's words go in `LocaleProvider` (fixed strings) and `TermsProvider` (nouns); entity kinds and agent roles in `EntityKindsProvider` and `AgentRolesProvider`.