Collapsible

A trigger and the region it shows or hides, announcing its own expanded state.

import { Collapsible } from "@glint/components/collapsible.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 260px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 380px;

                Collapsible {
                    title: "Show recovery codes";
                    open: true;

                    Rectangle {
                        background: Tokens.color-muted;
                        border-radius: Tokens.radius-md;
                        padding: 12px;

                        Text {
                            text: "4F9A-2B8C-99E1-77DA";
                            font-family: Tokens.typography-font-family-mono;
                            color: Tokens.color-foreground;
                            font-size: Tokens.typography-body-sm-size;
                        }
                    }
                }
            }
        }
    }
}

Usage

import { Collapsible } from "@glint/components/collapsible.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component AppWindow inherits Window {
    width: 560px;
    height: 260px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        Collapsible {
            title: "Advanced developer options";

            Text {
                text: "Enable verbose debugging and telemetry log capture.";
                color: Tokens.color-muted-foreground;
            }
        }
    }
}

Collapsible renders a standalone expandable button row that reveals or hides child content with smooth height transitions.

Examples

Controlled open state

Bind open with <=> to programmatically open or close the collapsible from external controls or state.

import { Collapsible } from "@glint/components/collapsible.slint";
import { Button } from "@glint/components/button.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 260px;
    background: Tokens.color-background;

    in-out property <bool> is-open: false;

    VerticalLayout {
        alignment: center;
        spacing: 16px;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            Button {
                text: root.is-open ? "Collapse details" : "Expand details";
                clicked => { root.is-open = !root.is-open; }
            }
        }

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 380px;

                Collapsible {
                    title: "System diagnostics";
                    open <=> root.is-open;

                    Text {
                        text: "All system services are operational. Latency is within normal thresholds.";
                        color: Tokens.color-muted-foreground;
                        font-size: Tokens.typography-body-sm-size;
                        wrap: word-wrap;
                    }
                }
            }
        }
    }
}

API Reference

Properties

Property	Type	Default	Description
`title`	`in string`	no default	Trigger label shown next to the chevron.
`open`	`in-out bool`	`false`	Two-way; when true, `@children` are visible.

Callbacks

Callback	Description
`toggled(bool)`	Fired with the new `open` value after a toggle click.

Accessibility

Expandable button role. The trigger row is an accessible-role: button with accessible-expandable: true and accessible-expanded reflecting the open state.
Keyboard activation. Focusing the trigger and pressing Space or Enter toggles the collapsible.
Content visibility. Collapsed content is hidden from screen readers and removed from the keyboard tab order while closed.
Focus ring. Displays a prominent keyboard focus ring when navigated using Tab.