Component
Accordion
A vertically stacked set of interactive headings that each reveal a section of content. Uses the headless @refraction-ui/accordion core.
Preview
Yes. It adheres to the WAI-ARIA design pattern for an accordion component.
Yes. It comes with default styles that matches the other components' aesthetic, controlled by CSS variables.
Yes. It has CSS transitions out of the box to smoothly expand and collapse the content area.
Installation
$
pnpm add @refraction-ui/react-accordionUsage
tsx
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@refraction-ui/react-accordion'
export function MyComponent() {
return (
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Is it unstyled?</AccordionTrigger>
<AccordionContent>Yes. It comes with default theme variables you can override.</AccordionContent>
</AccordionItem>
</Accordion>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'single' | 'multiple' | 'single' | Determines whether one or multiple items can be open at the same time. |
defaultValue | string | string[] | -- | The value of the item(s) to expand by default. |
collapsible | boolean | false | When type is "single", allows closing content when clicking trigger for an open item. |