Components

Accordion

A collapsible content component with customizable transitions.

 
<.accordion>
  <.accordion_item>
    <:header>
      What's the refund policy?
    </:header>
    <:panel>
      Our refund policy allows you to request...
    </:panel>
  </.accordion_item>

  <.accordion_item>
    <:header>
      Can I upgrade my license later?
    </:header>
    <:panel>
      Yes, you can upgrade your license at any...
    </:panel>
  </.accordion_item>

  <.accordion_item>
    <:header>
      Do you offer technical support?
    </:header>
    <:panel>
      Yes, we offer technical support via email.
    </:panel>
  </.accordion_item>
</.accordion>

Basic Configuration

Configure the accordion with headers, content, and default expanded states.

 
<.accordion>
  <.accordion_item>
    <:header>
      What's the refund policy?
    </:header>
    <:panel>
      Our refund policy allows you to request...
    </:panel>
  </.accordion_item>

  <.accordion_item>
    <:header>
      Can I upgrade my license later?
    </:header>
    <:panel>
      Yes, you can upgrade your license at any...
    </:panel>
  </.accordion_item>

  <.accordion_item>
    <:header>
      Do you offer technical support?
    </:header>
    <:panel>
      Yes, we offer technical support via email.
    </:panel>
  </.accordion_item>
</.accordion>

Behavior

Multiple Sections

Enable multiple sections to be expanded simultaneously for parallel content viewing.

 
<.accordion multiple>
  <.accordion_item>
    <:header>
      What's the refund policy?
    </:header>
    <:panel>
      Our refund policy allows you to request...
    </:panel>
  </.accordion_item>

  <.accordion_item>
    <:header>
      Can I upgrade my license later?
    </:header>
    <:panel>
      Yes, you can upgrade your license at any...
    </:panel>
  </.accordion_item>
</.accordion>

Default Expanded

Control which sections are initially expanded when the accordion loads.

 
<.accordion>
  <.accordion_item expanded>
    <:header>
      What's the refund policy?
    </:header>
    <:panel>
      Our refund policy allows you to request...
    </:panel>
  </.accordion_item>

  <.accordion_item>
    <:header>
      Can I upgrade my license later?
    </:header>
    <:panel>
      Yes, you can upgrade your license at any...
    </:panel>
  </.accordion_item>
</.accordion>

Customization

Custom Icons

Replace the default toggle indicators with custom icons for each section.

 
<.accordion>
  <.accordion_item icon={false}>
    <:header>
      What's the refund policy?
      <.icon
        name="hero-plus"
        class="size-5 text-zinc-400 transition-transform duration-[var(--animation-duration)] group-data-expanded/accordion-item:rotate-90 group-hover/accordion-item:text-gray-500 shrink-0"
      />
    </:header>
    <:panel>
      Our refund policy allows you to request a refund within 15 days of purchase if you are not satisfied with the product.
    </:panel>
  </.accordion_item>

  <.accordion_item icon={false}>
    <:header>
      Can I upgrade my license later?
      <.icon
        name="hero-plus"
        class="size-5 text-zinc-400 transition-transform duration-[var(--animation-duration)] group-data-expanded/accordion-item:rotate-90 group-hover/accordion-item:text-gray-500 shrink-0"
      />
    </:header>
    <:panel>
      Yes, you can upgrade your license at any time by paying the difference between your current license and the desired license.
    </:panel>
  </.accordion_item>
</.accordion>

Custom Styles

Apply custom styles to headers, content areas, and indicators while maintaining accessibility.

 
<.accordion>
  <.accordion_item class="border border-zinc-200 dark:border-white/10 rounded-xl bg-white dark:bg-zinc-800">
    <:header class="px-5 py-3">
      What's the refund policy?
    </:header>
    <:panel class="px-5 pb-3">
      Our refund policy allows you to request...
    </:panel>
  </.accordion_item>

  <!-- more items -->
</.accordion>

Animation

Duration

Adjust the expand and collapse animation timing for smooth transitions.

animation_duration=600
animation_duration=100
 
<.accordion animation_duration={600}>
  <.accordion_item>
    <:header>
      What's the refund policy?
    </:header>
    <:panel>
      Our refund policy allows you to request...
    </:panel>
  </.accordion_item>

  <!-- more items -->
</.accordion>

Accessibility

The Accordion component follows the WAI-ARIA specs for the accordion pattern.

Keyboard support

Key Action
Space when :header is focused Toggles the open state of the accordion
ArrowUp when :header is focused Navigates to the previous accordion
ArrowDownTab when :header is focused Navigates to the next accordion
EnterSpace when :header is focused Expands/collapses the accordion
Home when :header is focused Navigates to the first accordion
End when :header is focused Navigates to the last accordion