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 { mountAll } from 'fluid-primitives';
import { Collapsible } from 'fluid-primitives/collapsible';

mountAll('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	-
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`rootId`	`string` The root ID of the component, used for hydration and identification.	No	-
`ids`	`array` The IDs of of the component parts for composition.	No	[]
`controlled`	`boolean` If true, the component is meant to be initialized manually inside another component	No	false
`class`	`string` The CSS class(es) to be applied to the component.	No	-
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]

Rendered data attributes

Attribute	Description
`data-scope`	collapsible
`data-part`	root
`data-state`	"open" \| "closed"

collapsible.trigger

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

Name	Description	Required	Default
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]

Rendered data attributes

Attribute	Description
`data-scope`	collapsible
`data-part`	trigger
`data-state`	"open" \| "closed"
`data-disabled`	Present when disabled

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	-
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]

Rendered data attributes

Attribute	Description
`data-scope`	collapsible
`data-part`	indicator
`data-state`	"open" \| "closed"
`data-disabled`	Present when disabled

collapsible.content

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

Name	Description	Required	Default
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]

Rendered data attributes

Attribute	Description
`data-scope`	collapsible
`data-part`	content
`data-collapsible`
`data-state`	"open" \| "closed"
`data-disabled`	Present when disabled
`data-has-collapsed-size`	Present when the content has collapsed width or height

Machine JavaScript API

Name	Type	Description
`open`	`boolean`	Whether the collapsible is open.
`visible`	`boolean`	Whether the collapsible is visible (open or closing)
`disabled`	`boolean`	Whether the collapsible is disabled
`setOpen`	`(open: boolean) => void`	Function to open or close the collapsible.
`measureSize`	`VoidFunction`	Function to measure the size of the content.

Accessibility

Key	Description
`Space`	Opens/closes the collapsible.
`Enter`	Opens/closes the collapsible.

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>

Collapsible

Features

Installation

Examples

Default Open

Disabled

API Reference

collapsible.root

Rendered data attributes

collapsible.trigger

Rendered data attributes

collapsible.indicator

Rendered data attributes

collapsible.content

Rendered data attributes

Machine JavaScript API

Accessibility

Anatomy

On this page