Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Installation
npm i @huin-core/react-accordionAPI Reference
Accordion
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| type | "single" | "multiple" | Specifies the category or functionality of the component, influencing how it behaves or interacts with other elements. |
| value | "item-1" | "item-2" | "item-3" | Represents the current value or state of the component, which can be used to bind or track its data over time. |
| defaultValue | — | Specifies the initial value of the component when it is first rendered, before any user interaction or dynamic updates. |
| onValueChange | function | Event handler called when the value changes. |
| disabled | boolean | When set to true, disables the component, preventing user interaction or triggering of associated actions. |
| orientation | "vertical" | "horizontal" | Specifies the direction or layout of the component, determining whether it is displayed vertically or horizontally. |
| dir | "ltr" | "rtl" | The reading direction. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode. |
AccordionItem
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| disabled | boolean | When set to true, disables the component, preventing user interaction or triggering of associated actions. |
| value | string | Represents the current value or state of the component, which can be used to bind or track its data over time. |
AccordionHeader
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
AccordionTrigger
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
AccordionContent
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| forceMount | boolean | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from. |
Keyboard Interactions
| Key | Description |
|---|---|
Space Enter | Opens or closes the focused item. |
Tab | Moves focus to the next focusable element. |
ArrowDown | Moves focus to the next trigger. |
ArrowUp | Moves focus to the previous trigger. |
Home | Moves focus to the first trigger. |
End | Moves focus to the last trigger. |