Collapsible

A component that allows content to be expanded or collapsed with a smooth animation. Provides a space-efficient way to hide and reveal content, with support for both controlled and uncontrolled modes.

Can be controlled or uncontrolled

Full keyboard navigation

Architecture

so-collapsible
Slot: triggerYou need to place an so-button here.
so-button
Slot: content
so-collapsible-content
Slot: default

Reference

  • Collapsible

    The root container that manages the state and behavior of the collapsible system. Coordinates the interaction between trigger and content components.

    • Attributes

      • default-open
        boolean
        /
        default: false

        The initial open state of the collapsible when rendered. Use when you do not need to control its open state.

      • disabled
        boolean
        /
        default: false

        When true, prevents the user from interacting with the collapsible.

      • open
        boolean
        /
        default: -

        The controlled open state of the collapsible. Must be used in conjunction with onOpenChange.

  • Content

    The container that holds the collapsible content. Content within this component will be shown or hidden based on the collapsible's state.

Keyboard

  • Space

    Toggles the collapsible between open and closed states.

  • Enter

    Toggles the collapsible between open and closed states.

made for toddle