Components
Accordion
Accordion is a vertically stacked set of panels, only one of which can be expanded at a time.
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@epilot/volt-ui"
<Accordion type="multiple" className="w-96 flex flex-col">
<AccordionItem value="item-1">
<AccordionTrigger align="start">Product Information</AccordionTrigger>
<AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>
</AccordionItem>
<Separator />
<AccordionItem value="item-2">
<AccordionTrigger align="start">Shipping Information</AccordionTrigger>
<AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>
</AccordionItem>
</Accordion>API Reference
Accordion
Root component for the accordion. Accepts all standard Radix UI Accordion Root props.
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | "single" | Determines whether one or multiple items can be opened at the same time. |
value | string | string[] | - | The controlled value of the accordion. |
defaultValue | string | string[] | - | The value of the accordion when initially rendered. |
onValueChange | (value: string | string[]) => void | - | Event handler called when the value changes. |
collapsible | boolean | false | When type is "single", allows closing content when clicking trigger for an open item. |
disabled | boolean | false | When set to true, the accordion is disabled. |
dir | "ltr" | "rtl" | - | The reading direction of the accordion. |
orientation | "horizontal" | "vertical" | "vertical" | The orientation of the accordion. |
className | string | - | Additional CSS classes. |
AccordionItem
Container for an accordion item. Accepts all standard Radix UI Accordion Item props.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | A unique value for the item. |
disabled | boolean | false | When set to true, the item is disabled. |
className | string | - | Additional CSS classes. |
AccordionTrigger
The button that toggles the accordion item. Accepts all standard Radix UI Accordion Trigger props.
| Prop | Type | Default | Description |
|---|---|---|---|
align | "start" | "end" | "start" | Alignment of the chevron icon. When "start", the icon appears before the content. When "end", the icon appears after the content. |
disabled | boolean | false | When set to true, the trigger is disabled. |
asChild | boolean | false | Change the component to the HTML tag or custom component. |
className | string | - | Additional CSS classes. |
children | React.ReactNode | - | The content of the trigger. |
AccordionContent
The collapsible content of an accordion item. Accepts all standard Radix UI Accordion Content props.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes. |
children | React.ReactNode | - | The content to display when the accordion item is open. |
animate | boolean | true | Whether to animate the content when the accordion item is open. |