Collapsible

Reference

• Root

  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.

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying container for DOM manipulation.

    • open

      boolean

      /

      default: -

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

  • Events

    • onExpandTransitionEnd

      Event handler called when the expansion transition completes.

    • onOpenChange

      Event handler called when the open state of the collapsible changes.

    • onOpenTransitionEnd

      Event handler called when the opening transition completes.

  • Classes

    • disabled

      Applied when the collapsible component is disabled.

• Trigger

  A wrapper component that must contain an sc-button. The button controls the visibility of the collapsible content and automatically receives the appropriate ARIA attributes.

• Icon

  A visual indicator typically used to show the current state of the collapsible. Usually displayed as a chevron or arrow.

  • Classes

    • open

      Applied when the collapsible is in an open state.

• Content Wrapper

  The container that manages the animation of the collapsible content. Handles the smooth transition between expanded and collapsed states.

  • Attributes

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying container for DOM manipulation.

  • Classes

    • open

      Applied when the collapsible is in an open state.

• Content

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

  • Attributes

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying container for DOM manipulation.

  • Classes

    • disabled

      Applied when the collapsible component is disabled.