Accordion
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { Accordion } from "@corew500/ui/accordion"
<Accordion>Content</Accordion>CMS Integration
Loading...
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | AccordionValue | — | The controlled value of the item(s) that should be expanded. To render an uncontrolled accordion, use the `defaultValue` prop instead. |
| defaultValue | AccordionValue | — | The uncontrolled value of the item(s) that should be initially expanded. To render a controlled accordion, use the `value` prop instead. |
| disabled | enum | false | Whether the component should ignore user interaction. |
| hiddenUntilFound | enum | false | Allows the browser’s built-in page search to find and expand the panel contents. Overrides the `keepMounted` prop and uses `hidden="until-found"` to hide the element without removing it from the DOM. |
| keepMounted | enum | false | Whether to keep the element in the DOM while the panel is closed. This prop is ignored when `hiddenUntilFound` is used. |
| loopFocus | enum | true | Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. |
| onValueChange | (value: AccordionValue, eventDetails: AccordionRootChangeEventDetails) => void | — | Event handler called when an accordion item is expanded or collapsed. Provides the new value as an argument. |
| multiple | enum | false | Whether multiple items can be open at the same time. |
| orientation | enum | 'vertical' | The visual orientation of the accordion. Controls whether roving focus uses left/right or up/down arrow keys. |
| style | enum | — | Style applied to the element, or a function that returns a style object based on the component’s state. |
| className | enum | — | CSS class applied to the element, or a function that returns a class based on the component’s state. |
| render | enum | — | Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
Accessibility
Keyboard Navigation
- Trigger buttons are keyboard navigable with Enter/Space to toggle.
Screen Readers
- - Uses `role="region"` for content panels.
- Expanded state is announced via `aria-expanded`.
- Content panels use `aria-labelledby` to reference their trigger.
Localization
Translatable Content
- - All visible text (trigger labels, content) should be passed as translated strings.