Collapsible

A collapsible panel controlled by a button.

<ui:collapsible.root class="w-48 text-sm">
    <ui:collapsible.trigger class="group cursor-pointer rounded-md bg-accent px-1.5 py-1 font-semibold w-full flex items-center gap-1.5">
        <div class="group-data-[state=open]:rotate-90 transition-transform size-4 leading-none grid place-items-center">▶</div>
        <ui:collapsible.indicator state="{f:constant(name: 'Jramke\FluidPrimitives\Enum\CollapsibleIndicatorState::Closed')}">Show recovery keys</ui:collapsible.indicator>
        <ui:collapsible.indicator state="{f:constant(name: 'Jramke\FluidPrimitives\Enum\CollapsibleIndicatorState::Open')}">Hide recovery keys</ui:collapsible.indicator>
    </ui:collapsible.trigger>
    <ui:collapsible.content>
        <div class="mt-2 flex flex-col gap-1.5 rounded-md bg-accent py-2 px-3">
            <p>alien-bean-pasta</p>
            <p>wild-irish-burrito</p>
            <p>horse-battery-staple</p>
        </div>
    </ui:collapsible.content>
</ui:collapsible.root>

import { mount } from 'fluid-primitives';
import { Collapsible } from 'fluid-primitives/collapsible';

mount('collapsible', ({ props }) => {
	const collapsible = new Collapsible(props);
	collapsible.init();
	return collapsible;
});

Features

Full keyboard navigation support
Supports animation via CSS transitions or animations
Supports custom open and collapsed heights/widths

Installation

typo3 ui:add collapsible

Read more about installing Components and Primitives.

Examples

Default Open

Set the collapsible to be open by default.

alien-bean-pasta

wild-irish-burrito

horse-battery-staple

<ui:collapsible.root defaultOpen="{true}" class="w-48 text-sm">
    <ui:collapsible.trigger class="group cursor-pointer rounded-md bg-accent px-1.5 py-1 font-semibold w-full flex items-center gap-1.5">
        <div class="group-data-[state=open]:rotate-90 transition-transform size-4 leading-none grid place-items-center">▶</div>
        <ui:collapsible.indicator state="{f:constant(name: 'Jramke\FluidPrimitives\Enum\CollapsibleIndicatorState::Closed')}">Show recovery keys</ui:collapsible.indicator>
        <ui:collapsible.indicator state="{f:constant(name: 'Jramke\FluidPrimitives\Enum\CollapsibleIndicatorState::Open')}">Hide recovery keys</ui:collapsible.indicator>
    </ui:collapsible.trigger>
    <ui:collapsible.content>
        <div class="mt-2 flex flex-col gap-1.5 rounded-md bg-accent py-2 px-3">
            <p>alien-bean-pasta</p>
            <p>wild-irish-burrito</p>
            <p>horse-battery-staple</p>
        </div>
    </ui:collapsible.content>
</ui:collapsible.root>

Disabled

Prevent the collapsible from being toggled.

<ui:collapsible.root class="w-48 text-sm" disabled="{true}">
    <ui:collapsible.trigger class="group cursor-pointer rounded-md bg-accent px-1.5 py-1 font-semibold w-full flex items-center gap-1.5 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70">
        <div class="group-data-[state=open]:rotate-90 transition-transform size-4 leading-none grid place-items-center">▶</div>
        <ui:collapsible.indicator state="{f:constant(name: 'Jramke\FluidPrimitives\Enum\CollapsibleIndicatorState::Closed')}">Show recovery keys</ui:collapsible.indicator>
        <ui:collapsible.indicator state="{f:constant(name: 'Jramke\FluidPrimitives\Enum\CollapsibleIndicatorState::Open')}">Hide recovery keys</ui:collapsible.indicator>
    </ui:collapsible.trigger>
    <ui:collapsible.content>
        <div class="mt-2 flex flex-col gap-1.5 rounded-md bg-accent py-2 px-3">
            <p>alien-bean-pasta</p>
            <p>wild-irish-burrito</p>
            <p>horse-battery-staple</p>
        </div>
    </ui:collapsible.content>
</ui:collapsible.root>

API Reference

The following tables cover the available props of the Fluid Primitives. For a full list of available client side props and methods, see the Zag.js Machine API.

collapsible.root

Provides the collapsible state and wraps the trigger and content. Renders a <div> element.

Name	Description	Required	Default
`defaultOpen`	`boolean` The initial open state of the collapsible when rendered. Use when you don't need to control the open state of the collapsible.	No	false
`disabled`	`boolean` Whether the collapsible is disabled.	No	-
`collapsedHeight`	`string` The height of the content when collapsed.	No	-
`collapsedWidth`	`string` The width of the content when collapsed.	No	-

collapsible.trigger

Toggles the collapsible open and closed. Renders a <button> element.

collapsible.indicator

Displays state-specific content inside the trigger. Use state="open" and state="closed". Renders a <span> element.

Name	Description	Required	Default
`state`	`Enum\CollapsibleIndicatorState` The indicator state to render.	Yes	-

collapsible.content

Contains the collapsible content region. Renders a <div> element.

Anatomy

<primitives:collapsible.root>
    <primitives:collapsible.trigger>
        <primitives:collapsible.indicator state="closed" />
        <primitives:collapsible.indicator state="open" />
    </primitives:collapsible.trigger>
    <primitives:collapsible.content />
</primitives:collapsible.root>