Accordion

An component that allows you to organize your content into sections that can be expanded or collapsed.

Changing Colors

You can update the styles for the title button with the titleStyle prop.

Multiple

You can allow multiple accordion items to be open at the same time, using the the multiple prop and setting it to true.

<Accordion multiple={true}>
    <!-- Items... -->
</Accordion>

Default Open Item

You can set the item that should be open by default by passing in the item’s key to the defaultOpen prop.

<Accordion defaultOpen="water">
    <AccordionItem key="water">
        <!-- Title & Content -->
    </AccordionItem>
 
    <!-- More items... -->
</Accordion>

Disable Accordion

You can disable the accordion and adjust the disabled styles with the disabled and disabledStyle props respectively.

<Accordion disabled={true}>
    <!-- Items... -->
</Accordion>

API

Props

Accordion.Root

multiple

boolean

false

If true, multiple accordion items can be open at the same time.

disabled

boolean

false

Whether or not the accordion is disabled.

defaultValue

string | null

null

Allows you to set a default open item, by passing in the key of an item.

width

string

'w-full'

Set the width of the accordion.

containerStyle

string

'surface-50-600 shadow-lg shadow-surface-500/50-300/50 p-2'

Set the accordion container styles.

disabledStyle

string

'opacity-70 cursor-not-allowed'

Set the disabled styles.

Accordion.Item

   
key
:
  string
A unique key to identify the accordion item.

titleStyle

string

'font-semibold leading-none'

Set the title styles.

titleBgStyle

string

'transition-all primary-400 hover:primary-500'

Set the title background style.

contentStyle

string

'px-2 py-4'

Set the content styles.