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 | Description |
|---|---|---|---|
id required | text | Unique identifier matched against Accordion's expandedIds. | |
title required | text | 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 required | snippet | Panel content rendered when the item is expanded. |