Accordion

In progress
ARIA
RTL

An accordion is a vertical stack of interactive headings used to toggle the display of further information; each item can be 'collapsed' with just a short label visible or 'expanded' to show the full content.

Based on Radix UI.

Accordion

Anatomy

<Accordion>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Button>...</Accordion.Button>
    </Accordion.Header>
    <Accordion.Content>...</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Button>...</Accordion.Button>
    </Accordion.Header>
    <Accordion.ContentOutside>...</Accordion.ContentOutside>
  </Accordion.Item>
</Accordion>

Default

Open by default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

One item open at a time

Disabled

Content outside

Header content

With divider

Sizes

Sizes: content outside

Custom background

Accordion props

NameTypeRequiredDefaultDescription
itemSizesm | md | lg | xlNomdSize of accordeon item
singleOpenbooleanNofalseWhether only one item can be opened at a time
defaultValuestringNo-The value of the item to expand

Accordion.Item

NameTypeRequiredDefaultDescription
valuestringYes-The accordeon item value
disabledbooleanNofalseSet disabled/non-disabled