Accordion
Keyboard-accessible sections for progressively disclosing related content. Tab and Shift+Tab move between triggers; Enter or Space toggles the focused section.
Contract
| Axis | Values | Default |
|---|---|---|
| selection | controlled value or uncontrolled defaultValue | [] |
| expansion | Root multiple | single |
| availability | Root disabled or Item disabled | interactive |
| lifecycle | unmount, keepMounted, or hiddenUntilFound | unmount |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/accordion.css';Scroll inside the code area to read long lines.
Imports
import { TRAccordion } from '@tinyrack/ui/components/accordion';Scroll inside the code area to read long lines.
Playground
The Playground exposes Root disabled, Item disabled, single or multiple expansion, and all three panel lifecycles. The controlled value follows preview interaction and Reset restores the single, open Overview state with unmounted closed panels.
Usage
Controlled multiple expansion permalink
Open and close either section; the result below reflects the current value.
Examples
API
Anatomy
<TRAccordion.Root>
<TRAccordion.Item value="network">
<TRAccordion.Header>
<TRAccordion.Trigger>Network</TRAccordion.Trigger>
</TRAccordion.Header>
<TRAccordion.Panel>Online</TRAccordion.Panel>
</TRAccordion.Item>
</TRAccordion.Root>The complete anatomy is Root, Item, Header, Trigger, and Panel. Every part is available through TRAccordion.Part and as a named TRAccordionPart export, with matching TRAccordionPartProps and TRAccordionPartState types.
Root props
| Prop | Type | Default | Purpose |
|---|---|---|---|
value | Value[] | - | Controlled open item values. |
defaultValue | Value[] | [] | Initially open values for uncontrolled state. |
onValueChange | (value, details) => void | - | Reports the next values and Base UI event details. |
multiple | boolean | false | Allows more than one item to remain open. |
disabled | boolean | false | Blocks interaction for every item. |
keepMounted | boolean | false | Keeps every closed panel in the DOM with hidden. |
hiddenUntilFound | boolean | false | Keeps closed panels searchable with hidden="until-found"; overrides keepMounted. |
render | ReactElement | function | <div> | Replaces the root while preserving merged behavior and refs. |
Item requires a stable value for controlled or default expansion and accepts disabled and onOpenChange. Header renders an h3 by default; use render to match the surrounding heading level. Trigger renders a button and Panel renders a related region. All parts preserve className, style, native attributes, event handlers, refs, and Base UI's state-driven render contract.
Enter or Space toggles the focused trigger without moving focus. Tab and Shift+Tab follow normal document order, including disabled triggers, which remain focusable with aria-disabled="true" but cannot toggle. Deprecated arrow-key roving-focus props do not affect focus behavior.
Appearance
| Token | Fallback | Purpose |
|---|---|---|
--tr-accordion-background | --tinyrack-surface | Root surface. |
--tr-accordion-radius | --tinyrack-radius-md | Outer corner radius. |
--tr-accordion-content-background | transparent | Open panel surface. |
--tr-accordion-disabled-background | --tinyrack-surface-muted | Disabled item surface. |
--tr-accordion-disabled-color | --tinyrack-text-muted | Disabled item text. |
--tr-collapsible-duration | --tinyrack-duration-normal | Panel transition duration inherited from Collapsible. |
Import @tinyrack/ui/components/accordion.css explicitly. Foundation tokens provide light/dark colors, borders, focus indicators, typography, spacing, and reduced-motion behavior.