Accordion component

Introduction

The Accordion component renders collapsible sections that help users focus on one block of information at a time. It follows Publica.la's design system (Figma checkout flow) while meeting WCAG 2.1 AA accessibility standards.

Props

Prop	Type	Default	Description
id	string	Str::slug($title)	Unique identifier used to link the header and the region. Auto-generated from the title when omitted.
title	string	''	Heading displayed in the accordion header.
open	boolean	false	When true, the accordion is expanded on page load.
disabled	boolean	false	Disables interaction and applies a faded style.
dusk	string|null	null	Attribute used by Dusk tests.
optional	boolean	false	Adds an "Optional" badge next to the title.
stringInfo	string|null	null	Text shown on the right side of the header when the accordion is closed (often a price, status, or short summary).
closeOthers	boolean	false	When true, opening this accordion automatically closes all other accordions on the page.
closeSpecific	array	[]	Array of accordion IDs that should be closed when this one opens. Useful for complex flows.

Note All additional attributes (such as class, wire:model, or ARIA props) are merged via $attributes->merge() and forwarded to the root element.

Usage

Basic example

<x-ui.accordion title="Shipping Method">
    <p>Your content goes here…</p>
</x-ui.accordion>

Advanced example

<x-ui.accordion
    id="shipping-method"
    title="Shipping Method"
    :open="true"
    :disabled="false"
    :optional="true"
    stringInfo="$5.99"
    :closeOthers="false"
    :closeSpecific="['billing-info', 'payment-method']"
    class="tw-mb-4"
>
    <div class="tw-bg-white tw-p-4 tw-rounded">
        <p>Collapsible content…</p>
    </div>
</x-ui.accordion>

Accessibility

• Uses semantic heading structure (<h3> inside a <button>).
• Toggles aria-expanded via Alpine state.
• Provides dynamic aria-label values ("Expand title" / "Collapse title").
• Keyboard-accessible (Space or Enter toggles the section).
• Focus indicators follow Tailwind accessibility guidelines (focus-visible:tw-ring-4 …).

Livewire integration

The accordion listens to two browser events—accordion-open and accordion-close—so Livewire components can control its state programmatically.

// In a Livewire component
public function showShippingMethod(): void
{
    $this->dispatchBrowserEvent('accordion-open', ['target' => 'shipping-method']);
}

Closing behaviours

• Single-open mode – Set :closeOthers="true" on each accordion in a group.
• Targeted close – Pass specific IDs to closeSpecific.

Related files

• resources/views/components/ui/accordion.blade.php
• Alpine helper: resources/js/alpine-components/accordion-component.js

---

Updated for Laravel 10, Livewire 2, Alpine 2, and Tailwind 3.