Components

Accordion

Collapsible sections for organized content display. 

<.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>

Multiple

Allow multiple accordion items to be open simultaneously for flexible exploration. 

<.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>

Expanded

Set specific accordion items to an expanded state by default for immediate visibility. 

<.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>

Custom icon

Add custom icons to accordion items to match your design or convey specific meanings. 

<.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>

Customization

Style the accordion component to fit your design needs while maintaining functionality. 

<.accordion>
  <.accordion_item class="border 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

Adjust the animation duration of accordion transitions for a tailored experience.

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