Accordion

New

Overview

An accordion implemented with native HTML details and summary elements.

Notification settings

Choose which product updates and account alerts you receive.

Privacy & security

Control your privacy settings and security preferences. Enable two-factor authentication, manage connected devices, and review active sessions.

Billing & subscription

Manage your plan, payment method, and billing history.

HEEx

<Accordion.accordion class="mx-auto max-w-xl">
  <:item name="Notification settings">
    Choose which product updates and account alerts you receive.
  </:item>
  <:item name="Privacy & security" open>
    Control your privacy settings and security preferences. Enable two-factor authentication,
    manage connected devices, and review active sessions.
  </:item>
  <:item name="Billing & subscription">
    Manage your plan, payment method, and billing history.
  </:item>
</Accordion.accordion>

Add this module

terminal

mix dizzy.add accordion

Component API

Accordion.accordion

Attributes

Attributes for Accordion.accordion
Name	Type	Default	Values
`class`	`:any`	nil	—
`rest`	`:global`	nil	—

Slots

Slots for Accordion.accordion
Name	Required	Attributes
`item`	Required	name, open