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>

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

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

Collapsible

Features

Anatomy

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

On this page