1. components
  2. accordion
  3. react

Accordion

Divide content into collapsible sections.

Default

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.



Collapsible

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.



Multiple

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.



Open State

Each Item id added to the Accordion value array will be open by default.

useState Hook

const [value, setValue] = useState(['club']);
<Accordion value={value} onValueChange={setValue}>
...
</Accordion>

Harcoded

<Accordion value={['club']}>...</Accordion>

Multiple Items

Use multiple to enable multiple items to be opened at once.

<Accordion multiple>...</Accordion>

Custom Icons

import { Plus, Minus, Heart } from 'lucide-react';
<Accordion iconOpen={<Plus size={24} />} iconClosed={<Minus size={24} />}>
...
</Accordion>
<Accordion.Control lead={<Heart size={24} />}>Heart</Accordion.Control>

API Reference

Accordion

Property Type Description
animDuration
number
The slide animation duration in milliseconds.
iconOpen
React.ReactNode
Set the open state icon.
iconClosed
React.ReactNode
Set the closed state icon.
onValueChange
object
Set the opened state.
base
string
Sets base styles.
padding
string
Set padding styles.
spaceY
string
Set vertical spacing styles.
rounded
string
Set border radius styles.
width
string
Set the width styles.
classes
string
Provide arbitrary CSS classes.
children
React.ReactNode
-
value
array
The `value` of the accordion items that are currently being expanded.
dir
string
The document's text/writing direction.
Default: ltr
getRootNode
object
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
disabled
boolean
Whether the accordion items are disabled
multiple
boolean
Whether multple accordion items can be expanded at the same time.
Default: false
ids
Partial<...>
The ids of the elements in the accordion. Useful for composition.
collapsible
boolean
Whether an accordion item can be closed after it has been expanded.
Default: false
onFocusChange
object
The callback fired when the focused accordion item changes.

AccordionItem

Property Type Description
base
string
Sets base styles.
spaceY
string
Set vertical spacing styles.
classes
string
Provide arbitrary CSS classes.
children
React.ReactNode
-
value *
string
The value of the accordion item.
disabled
boolean
Whether the accordion item is disabled.

AccordionControl

Property Type Description
headingElement
string
The heading element.
disabled
boolean
Set a disabled state for the item.
base
string
Sets control's base styles.
hover
string
Sets control's the hover styles.
padding
string
Sets control's the padding styles.
rounded
string
Sets control's the border radius styles.
classes
string
Provide arbitrary CSS classes to the control.
leadBase
string
Sets the lead's base styles
leadClasses
string
Provide arbitrary CSS classes to the lead.
contentBase
string
Sets the lead's base styles
contentClasses
string
Provide arbitrary CSS classes to the content.
indicatorBase
string
Sets the lead's base styles
indicatorClasses
string
Provide arbitrary CSS classes to the indicator.
lead
React.ReactNode
The lead child slot for the control.
children
React.ReactNode
-

AccordionPanel

Property Type Description
base
string
Set the panel's base styles.
padding
string
Set the panel's padding styles.
rounded
string
Set the panel's border-radius styles.
classes
string
Provide arbitrary CSS classes to the panel.
children
React.ReactNode
-