01
Overview
A single expandable panel inside an Accordion. Reads the accordion context to drive its expanded state and toggle behavior.
Usage
AccordionItem is a compose-only leaf of Accordion.
The idiomatic API is Accordion.Item, reached through the parent namespace —
see the Accordion README for the composed
snippet. The flat @lostgradient/cinder/accordion-item subpath remains exported for
à-la-carte builds that import the leaf directly.
AccordionItem throws if used outside an Accordion — the context lookup is
required.
02
When to use
Use when
- Rendering one expandable section inside an accordion parent.
- Disabling a single section while leaving siblings interactive via the disabled prop.
Avoid when
- Standing alone outside an accordion — it requires the accordion context to function.
03
Props
| Name | Type | Default | Required | Bindable | Description |
|---|---|---|---|---|---|
id | text | req | Unique identifier matched against Accordion's expandedIds. | ||
title | text | req | Visible header label for the item. | ||
disabled | boolean | false | When true, the item cannot be toggled. | ||
style | text | Inline style string applied to the .cinder-accordion-item root. | |||
children | snippet | req | Panel content rendered when the item is expanded. |