Collapsible

A panel that a button expands and collapses.

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

Features

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

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>

Installation

typo3 ui:add collapsible

Read more about installing Components and Primitives.

Examples

Start open

Set defaultOpen to render the panel expanded.

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>

Show a preview of the content

Set collapsedHeight on the root to keep the start of the content visible while the panel is closed. The text below shows three lines until you click "Read more". Screen readers read the whole text in both states, and the trigger reports the state through aria-expanded.

Fluid Primitives renders every component on the server with Fluid and hydrates it in the browser with a Zag.js state machine. Your templates stay in charge of the markup, the library adds state, keyboard support and ARIA attributes. Style the parts with the data attributes they expose.

<ui:collapsible.root collapsedHeight="4.5rem" class="w-72 text-sm">
    <ui:collapsible.content class="data-[state=closed]:mask-b-from-40%">
        <p class="leading-6">
            Fluid Primitives renders every component on the server with Fluid and hydrates it in the browser with a Zag.js state machine. Your templates stay in charge of the markup, the library adds state, keyboard support and ARIA attributes. Style the parts with the <a href="/docs/core-concepts/styling#content-data-attributes" class="font-medium underline underline-offset-4">data attributes</a> they expose.
        </p>
    </ui:collapsible.content>
    <ui:collapsible.trigger class="mt-2 cursor-pointer font-semibold underline underline-offset-4">
        <ui:collapsible.indicator state="{f:constant(name: 'Jramke\FluidPrimitives\Enum\CollapsibleIndicatorState::Closed')}">Read more</ui:collapsible.indicator>
        <ui:collapsible.indicator state="{f:constant(name: 'Jramke\FluidPrimitives\Enum\CollapsibleIndicatorState::Open')}">Read less</ui:collapsible.indicator>
    </ui:collapsible.trigger>
</ui:collapsible.root>

Disable the collapsible

Set disabled to keep the panel in its current state. The panel below stays closed.

<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	-
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	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	[]
`autoMount`	`boolean` Whether the client initializes the component on its own. Set it to false to mount it yourself with `mount()`	No	true
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-collapsible-root`	<uid>
`data-state`	"open" \| "closed"

collapsible.trigger

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

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	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	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-collapsible-trigger`	<uid>
`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	-
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	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	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-collapsible-indicator`	<uid>
`data-state`	"open" \| "closed"
`data-disabled`	Present when disabled

collapsible.content

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

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	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	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-collapsible-content`	<uid>
`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.
`getTriggerState`	`() => TriggerState`	Returns the state of the trigger
`getContentState`	`() => ContentState`	Returns the state of the content

Accessibility

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