made for Nordcraft

Collapsible

A component that expands and collapses content within a panel. Implements proper keyboard navigation and ARIA attributes to ensure accessibility.

  • Full keyboard navigation

  • Can be controlled or uncontrolled

Example

Architecture

zcore-collapsible-root
Slot: default
zcore-collapsible-trigger
Slot: default You need to place an zcore-button here.
zcore-button
Slot: default
zcore-collapsible-icon
zcore-collapsible-content-wrapper
Slot: default
zcore-collapsible-content
Slot: default

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
        string
        /
        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

      • onCollapseTransitionEnd

        Event handler called when the collapse transition completes.

      • onExpandTransitionEnd

        Event handler called when the expansion transition completes.

      • onOpenChange

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

    • Classes

      • disabled

        Applied when the collapsible component is disabled.

  • Trigger

    A wrapper component that must contain an zcore-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.

    Keyboard

    • Space

      Toggles the collapsible between open and closed states.

    • Enter

      Toggles the collapsible between open and closed states.