# Accordion

> A set of expand/collapse sections built on Disclosure, stacked into one divider-separated list.

```ts
import { Accordion } from "@sdxc/ui";
```

Renders the list's root host: a plain `<div>` that stacks
Accordion.Item sections in normal block flow, each drawing its own
divider so the whole list reads as one continuous group.

## Examples

```tsx
<Accordion>
	<Accordion.Item>
		<Accordion.Trigger>
			{t("faq.refunds.question")}
			<ChevronDownIcon data-slot="icon" aria-hidden />
		</Accordion.Trigger>
		<Accordion.Content>
			<p>{t("faq.refunds.answer")}</p>
		</Accordion.Content>
	</Accordion.Item>
	<Accordion.Item>
		<Accordion.Trigger>
			{t("faq.shipping.question")}
			<ChevronDownIcon data-slot="icon" aria-hidden />
		</Accordion.Trigger>
		<Accordion.Content>
			<p>{t("faq.shipping.answer")}</p>
		</Accordion.Content>
	</Accordion.Item>
</Accordion>
```

```tsx
<Accordion>
	<Accordion.Item name="faq" open>
		<Accordion.Trigger>
			{t("faq.refunds.question")}
			<ChevronDownIcon data-slot="icon" aria-hidden />
		</Accordion.Trigger>
		<Accordion.Content>
			<p>{t("faq.refunds.answer")}</p>
		</Accordion.Content>
	</Accordion.Item>
	<Accordion.Item name="faq">
		<Accordion.Trigger>
			{t("faq.shipping.question")}
			<ChevronDownIcon data-slot="icon" aria-hidden />
		</Accordion.Trigger>
		<Accordion.Content>
			<p>{t("faq.shipping.answer")}</p>
		</Accordion.Content>
	</Accordion.Item>
</Accordion>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | One or more Accordion.Item sections to stack into a list. |

Also accepts everything in `TagProps<"div">`.


### Accordion.Item

Renders one section as Disclosure restyled into a flush list row: only a shared block-end divider survives, restored block-start on the first section.

Also accepts everything in `Disclosure.Props`.


### Accordion.Trigger

Renders Accordion.TriggerProps.children as the section's label row, spread to opposite ends and underlined on hover.

Also accepts everything in `Disclosure.TriggerProps`.


### Accordion.Content

Renders Accordion.ContentProps.children as the section's revealed body: Disclosure.Panel running edge to edge like its trigger, with block-end padding and small, muted text sized for supporting copy.

Also accepts everything in `Disclosure.PanelProps`.