# Collapsible

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

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

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

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