Components
pinion-ui

Theme

Tune

Lang

Collapse

Wrapped daisyUI 5 collapse class for a single toggle block (no-JS, checkbox-driven). Pass header via title prop or slot:title, body via $slot. Icons: null (default) / arrow / plus. Props: bordered (default true), open (initial state). Minimal by default; icon is opt-in. Stack multiple for FAQ.

Minimal — title prop and body slot

Write the body content here.

Any markup is allowed — it is a Blade slot.

<x-collapse title="Click to open">
    <p>Write the body content here.</p>
    <p class="mt-2 text-base-content/60">Any markup is allowed — it is a Blade slot.</p>
</x-collapse>

<div class="radius-box overflow-hidden border border-base-300 bg-base-100">
<input type="checkbox" id="collapse-e064b514" class="peer sr-only">
<label for="collapse-e064b514" class="flex w-full cursor-pointer select-none items-center justify-between gap-2 px-4 py-3 font-semibold"><span>Click to open</span></label>
<div class="grid grid-rows-[0fr] peer-checked:grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-in-out">
<div class="overflow-hidden">
<div class="px-4 pb-4 text-sm">
<p>
                    Write the body content here.
                </p>
<p class="mt-2 text-base-content/60">
                    Any markup is allowed — it is a Blade slot.
                </p>
</div>
</div>
</div>
</div>

icon variants: arrow (default) / plus / null

The chevron is suppressed.

The arrow rotates on open.

The plus turns into a minus.

<x-collapse title="No icon" :icon="null">
    <p>The chevron is suppressed.</p>
</x-collapse>
<x-collapse title="arrow icon" icon="arrow">
    <p>The arrow rotates on open.</p>
</x-collapse>
<x-collapse title="plus icon" icon="plus">
    <p>The plus turns into a minus.</p>
</x-collapse>

<div class="radius-box overflow-hidden border border-base-300 bg-base-100">
<input type="checkbox" id="collapse-4bf4e65e" class="peer sr-only">
<label for="collapse-4bf4e65e" class="flex w-full cursor-pointer select-none items-center justify-between gap-2 px-4 py-3 font-semibold"><span>No icon</span></label>
<div class="grid grid-rows-[0fr] peer-checked:grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-in-out">
<div class="overflow-hidden">
<div class="px-4 pb-4 text-sm">
<p>
                    The chevron is suppressed.
                </p>
</div>
</div>
</div>
</div>
<div class="radius-box overflow-hidden border border-base-300 bg-base-100">
<input type="checkbox" id="collapse-404d4520" class="peer sr-only">
<label for="collapse-404d4520" class="flex w-full cursor-pointer select-none items-center justify-between gap-2 px-4 py-3 font-semibold peer-checked:[&amp;&gt;svg]:rotate-180"><span>arrow icon</span>
<svg class="w-4 h-4 shrink-0 transition-transform duration-300" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></label>
<div class="grid grid-rows-[0fr] peer-checked:grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-in-out">
<div class="overflow-hidden">
<div class="px-4 pb-4 text-sm">
<p>
                    The arrow rotates on open.
                </p>
</div>
</div>
</div>
</div>
<div class="radius-box overflow-hidden border border-base-300 bg-base-100">
<input type="checkbox" id="collapse-6a0c4427" class="peer sr-only">
<label for="collapse-6a0c4427" class="flex w-full cursor-pointer select-none items-center justify-between gap-2 px-4 py-3 font-semibold peer-checked:[&amp;_.cc-bar-v]:scale-y-0"><span>plus icon</span>
<span class="relative inline-block h-4 w-4 shrink-0"><span class="cc-bar-h absolute inset-0 m-auto h-0.5 w-4 bg-current"></span>
<span class="cc-bar-v absolute inset-0 m-auto h-4 w-0.5 bg-current transition-transform duration-300"></span></span></label>
<div class="grid grid-rows-[0fr] peer-checked:grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-in-out">
<div class="overflow-hidden">
<div class="px-4 pb-4 text-sm">
<p>
                    The plus turns into a minus.
                </p>
</div>
</div>
</div>
</div>

Initial open

Rendered already expanded.

<x-collapse title="Start open" :open="true">
    <p>Rendered already expanded.</p>
</x-collapse>

<div class="radius-box overflow-hidden border border-base-300 bg-base-100">
<input type="checkbox" id="collapse-2401b525" class="peer sr-only" checked>
<label for="collapse-2401b525" class="flex w-full cursor-pointer select-none items-center justify-between gap-2 px-4 py-3 font-semibold"><span>Start open</span></label>
<div class="grid grid-rows-[0fr] peer-checked:grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-in-out">
<div class="overflow-hidden">
<div class="px-4 pb-4 text-sm">
<p>
                    Rendered already expanded.
                </p>
</div>
</div>
</div>
</div>

Borderless (when the parent already has its own frame)

No frame — useful inside a card that already has one.

<x-collapse title="bordered=false" :bordered="false">
    <p>No frame — useful inside a card that already has one.</p>
</x-collapse>

<div class="radius-box overflow-hidden bg-base-100">
<input type="checkbox" id="collapse-b04fae5f" class="peer sr-only">
<label for="collapse-b04fae5f" class="flex w-full cursor-pointer select-none items-center justify-between gap-2 px-4 py-3 font-semibold"><span>bordered=false</span></label>
<div class="grid grid-rows-[0fr] peer-checked:grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-in-out">
<div class="overflow-hidden">
<div class="px-4 pb-4 text-sm">
<p>
                    No frame — useful inside a card that already has one.
                </p>
</div>
</div>
</div>
</div>

Pass title as a slot (when you need HTML in it)

Use titleSlot when the heading needs markup.

<x-collapse>
    <x-slot:titleSlot>
        <span class="font-bold">HTML-based</span> title
    </x-slot:titleSlot>
    <p>Use titleSlot when the heading needs markup.</p>
</x-collapse>

<div class="radius-box overflow-hidden border border-base-300 bg-base-100">
<input type="checkbox" id="collapse-320c5d5b" class="peer sr-only">
<label for="collapse-320c5d5b" class="flex w-full cursor-pointer select-none items-center justify-between gap-2 px-4 py-3 font-semibold"><span><span class="font-bold">HTML-based</span> title</span></label>
<div class="grid grid-rows-[0fr] peer-checked:grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-in-out">
<div class="overflow-hidden">
<div class="px-4 pb-4 text-sm">
<p>
                    Use titleSlot when the heading needs markup.
                </p>
</div>
</div>
</div>
</div>