Accordion
A vertically stacked set of interactive headings that each reveal an associated section of content.
Loading...
main.ts
styles.css
Features
- Full keyboard navigation.
- Supports horizontal/vertical orientation.
- Supports Right to Left direction.
- Can expand one or multiple items.
- Can be controlled or uncontrolled.
API Reference
Root
Prop | Type | Default |
---|---|---|
defaultValue | [] | string | - |
disabled | boolean | - |
orientation | RdxAccordionOrientation | 'vertical' |
type | RdxAccordionType | 'single' |
value | [] | string | - |
onValueChange | EventEmitter<void> | new EventEmitter<void>() |
Data attribute | Values |
---|---|
[data-orientation] | "vertical" | "horizontal" |
Item
Contains all the parts of a collapsible section.
Prop | Type | Default |
---|---|---|
disabled | boolean | - |
expanded | boolean | - |
value | string | - |
closed | EventEmitter<void> | new EventEmitter<void>() |
expandedChange | EventEmitter<boolean> | new EventEmitter<boolean>() |
opened | EventEmitter<void> | new EventEmitter<void>() |
Data attribute | Values |
---|---|
[data-state] | "open" | "closed" |
[data-disabled] | Present when disabled |
[data-orientation] | "vertical" | "horizontal" |
Header
Wraps an rdxAccordionTrigger
.
Data attribute | Values |
---|---|
[data-state] | "open" | "closed" |
[data-disabled] | Present when disabled |
[data-orientation] | "vertical" | "horizontal" |
Trigger
Toggles the collapsed state of its associated item. It should be nested inside an rdxAccordionHeader
.
Data attribute | Values |
---|---|
[data-state] | "open" | "closed" |
[data-disabled] | Present when disabled |
[data-orientation] | "vertical" | "horizontal" |
Content
Contains the collapsible content for an item.
Data attribute | Values |
---|---|
[data-state] | "open" | "closed" |
[data-disabled] | Present when disabled |
[data-orientation] | "vertical" | "horizontal" |
CSS Variable | Description |
---|---|
--radix-accordion-content-width | The width of the content when it opens/closes |
--radix-accordion-content-height | The height of the content when it opens/closes |