Skip to content

Pro Component — This component requires an Aura UI Pro license.

Overview

The Accordion component provides collapsible content panels that allow users to show and hide sections of related content. Built with Alpine.js for smooth animations, it supports single or multiple open panels, custom icons, and default open states.

Basic Usage

Content for section one goes here.
Content for section two goes here. 
<x-aura::accordion>
    <x-aura::accordion.item title="Section One">
        Content for section one goes here.
    </x-aura::accordion.item>

    <x-aura::accordion.item title="Section Two">
        Content for section two goes here.
    </x-aura::accordion.item>
</x-aura::accordion>

Props

Accordion

Prop Type Default Description
multiple bool false Allow multiple panels to be open simultaneously.

Accordion Item

Prop Type Default Description
title string '' The heading text displayed in the trigger button.
open bool false Whether the panel is open by default.
icon string|null null Optional icon name displayed before the title.

Examples

FAQ Section

We accept Visa, Mastercard, American Express, and PayPal. All transactions are processed securely through Stripe.
Standard shipping takes 5-7 business days. Express shipping is available for 2-3 business day delivery.
We offer a 30-day money-back guarantee on all products. Items must be in original condition with packaging intact. 
<x-aura::accordion>
    <x-aura::accordion.item title="What payment methods do you accept?">
        We accept Visa, Mastercard, American Express, and PayPal.
        All transactions are processed securely through Stripe.
    </x-aura::accordion.item>

    <x-aura::accordion.item title="How long does shipping take?">
        Standard shipping takes 5-7 business days. Express shipping
        is available for 2-3 business day delivery.
    </x-aura::accordion.item>

    <x-aura::accordion.item title="What is your return policy?">
        We offer a 30-day money-back guarantee on all products.
        Items must be in original condition with packaging intact.
    </x-aura::accordion.item>
</x-aura::accordion>

Multiple Open Panels

<x-aura::accordion :multiple="true">
    <x-aura::accordion.item title="General Settings" :open="true">
        <div class="space-y-4">
            <x-aura::input label="Site Name" name="site_name" />
            <x-aura::input label="Tagline" name="tagline" />
        </div>
    </x-aura::accordion.item>

    <x-aura::accordion.item title="Email Settings" :open="true">
        <div class="space-y-4">
            <x-aura::input label="SMTP Host" name="smtp_host" />
            <x-aura::input label="SMTP Port" name="smtp_port" />
        </div>
    </x-aura::accordion.item>
</x-aura::accordion>

With Icons and Default Open

View and manage your account details, profile picture, and personal information.
Configure two-factor authentication, password policies, and active sessions.
Manage your subscription plan, payment methods, and view billing history.
Control which notifications you receive via email, SMS, or push notifications. 
<x-aura::accordion>
    <x-aura::accordion.item title="Account Information" icon="user" :open="true">
        View and manage your account details, profile picture,
        and personal information.
    </x-aura::accordion.item>

    <x-aura::accordion.item title="Security Settings" icon="shield">
        Configure two-factor authentication, password policies,
        and active sessions.
    </x-aura::accordion.item>

    <x-aura::accordion.item title="Billing & Subscription" icon="credit-card">
        Manage your subscription plan, payment methods,
        and view billing history.
    </x-aura::accordion.item>

    <x-aura::accordion.item title="Notifications" icon="bell">
        Control which notifications you receive via email,
        SMS, or push notifications.
    </x-aura::accordion.item>
</x-aura::accordion>

Nested Content with Rich HTML

Weight 1.2 kg
Dimensions 30 x 20 x 10 cm
Material Recycled aluminum 
<x-aura::accordion>
    <x-aura::accordion.item title="Product Specifications">
        <table class="w-full text-sm">
            <tr>
                <td class="font-medium py-1">Weight</td>
                <td>1.2 kg</td>
            </tr>
            <tr>
                <td class="font-medium py-1">Dimensions</td>
                <td>30 x 20 x 10 cm</td>
            </tr>
            <tr>
                <td class="font-medium py-1">Material</td>
                <td>Recycled aluminum</td>
            </tr>
        </table>
    </x-aura::accordion.item>
</x-aura::accordion>

Slots

Slot Component Description
default accordion Contains accordion.item children.
default accordion.item The collapsible content of each panel.

Accessibility

  • Each accordion header is a <button> element, fully keyboard accessible.
  • aria-expanded reflects the open/closed state of each panel.
  • aria-controls links each button to its corresponding content panel.
  • Content panels use role="region" with aria-labelledby pointing to the header.
  • Enter or Space toggles the panel when the header button is focused.
  • Focus is managed so keyboard users can tab through headers naturally.