Loading...
An accordion is a vertically stacked set of expandable panels, each containing an interactive header and an associated content area.
Full keyboard navigation
Can be controlled or uncontrolled
Can expand one or multiple items
Animated with Motion
Animated indicator icon
Respects reduce motion with system settings and through props
You can use any Motion Animation values:
Each animation comes with predefined transitionPreset
Alternatively, you can choose transition from this list:
defaultanticipatequickOutovershootOutswiftOutsnappyOutinOutinQuadinCubicinQuartinQuintinExpoinCircoutQuadoutCubicoutQuartoutQuintoutExpooutCircinOutQuadinOutCubicinOutQuartinOutQuintinOutExpoinOutCircinOutBaseinoutlinearAdditionaly, you can control the duration of the transition:
You can use any Motion Transition values:
You can use any React node as an icon:
| Prop | Type | Default |
|---|---|---|
animation | AnimationProps | ― |
animationPreset | enum | "motion" |
transition | Transition | ― |
transitionPreset | enumTransitionPreset | ― |
reduceMotion | boolean | false |
Support all Root Radix API.
Support all Item Radix API.
| Prop | Type | Default |
|---|---|---|
icon | ReactNode | ((props: { isOpen: boolean }) => ReactNode) | null | ― |
Support all Trigger Radix API.
Support all Content Radix API.