Accordion

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.

Accordion

Anatomy

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

Default

Open by default

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Single open

Disabled item

Content outside

Sizes

On change event

Accordion props
Name Type Required Default Description
header slot Yes - Header of accordion item, see Accordion.Header
class css_class No - CSS class to be applied
item_size sm | md | lg | xl No md Size of the item, header mostly
is_single_open boolean No false Close other items if true
has_content_outside boolean No false Content looks outside
value string | list No [] Value (List of values) items to be open
on_change event No - Handler for open/close of the item
Accordion.Item props
Name Type Required Default Description
class css_class No - CSS class to be applied
disabled boolean No false Disabling accordion item
has_content_outside boolean No false Content looks outside
value string No 0-started index of item in sequence Value of item, see Accordion's value
Accordion.Header props
Name Type Required Default Description
class css_class No - CSS class to be applied
disabled boolean No false Disabling accordion item
size sm | md | lg | xl No md Size of the item