made for Nordcraft

Accordion

A vertically stacked set of buttons that each reveal an associated section of content. Implements the ARIA accordion pattern for proper accessibility support.

  • Full keyboard navigation

  • Supports horizontal/vertical orientation

  • Supports Right to Left direction

  • Can expand one or multiple items

  • Can be controlled or uncontrolled

Example

Architecture

zcore-accordion-root
Slot: default
zcore-accordion-item
Slot: default
zcore-accordion-trigger
Slot: default You need to place an zcore-button here.
zcore-button
Slot: default
zcore-accordion-icon
zcore-accordion-content-wrapper
Slot: default
zcore-accordion-content
Slot: default The actual content for the item goes here.

Reference

  • Root

    The root container that manages the state and behavior of the accordion system. Coordinates the interaction between triggers and content sections.

    • Attributes

      • collapsible
        boolean
        /
        default: false

        When type is set to single, allows closing the active content section by clicking its trigger again.

      • default-value
        string[]
        /
        default: -

        The initial values of items to expand when rendered. Use when you do not need to control the state of the accordion.

      • direction
        enum
        /
        default: ltr

        The reading direction of the accordion. Affects keyboard navigation and visual presentation.

      • disabled
        boolean
        /
        default: false

        When true, prevents the user from interacting with the accordion and all its items.

      • id
        string
        /
        default: -

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

      • orientation
        enum
        /
        default: vertical

        The orientation of the accordion. Affects layout and keyboard navigation behavior.

      • type
        enum
        /
        default: single

        Determines whether one or multiple items can be expanded simultaneously.

      • value
        string[]
        /
        default: -

        The controlled values of items to expand. Must be used in conjunction with onValueChange.

    • Events

      • onValueChange

        Event handler called when the expanded state of any accordion item changes.

    • Classes

      • direction-rtl

        Applied when the reading direction is right-to-left.

      • orientation-horizontal

        Applied when the accordion orientation is horizontal.

  • Item

    The container for an individual collapsible section, including its trigger and content.

    • Attributes

      • disabled
        boolean
        /
        default: false

        When true, prevents the user from interacting with this specific item.

      • id
        string
        /
        default: -

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

      • pre-render
        boolean
        /
        default: false

        Renders the accordion item's content in the DOM even when collapsed, improving performance and enabling search indexing.

      • value
        string
        /
        default: -

        A unique identifier for the item. Used to control and track the expanded state.

    • Classes

      • disabled

        Applied when the accordion item is disabled.

  • Trigger

    A wrapper component that must contain an zcore-button. The button controls the visibility of its associated content section and automatically receives appropriate ARIA attributes.

    • Icon

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

      • Classes

        • open

          Applied when the accordion item is in an open state.

    • Content wrapper

      The container that manages the animation of the accordion 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 accordion item is in an expanded state.

    • Content

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

      • Attributes

        • id
          string
          /
          default: -

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

      • Classes

        • disabled

          Applied when the accordion item is disabled.

    Keyboard

    • Space

      When focus is on a trigger button, toggles the expansion state of its section.

    • Enter

      When focus is on a trigger button, toggles the expansion state of its section.

    • Tab

      Moves focus to the next focusable element within the accordion.

    • Shift
      +Tab

      Moves focus to the previous focusable element within the accordion.

    • When orientation is vertical, moves focus to the next trigger button.

    • When orientation is vertical, moves focus to the previous trigger button.

    • When orientation is horizontal, moves focus to the next trigger button.

    • When orientation is horizontal, moves focus to the previous trigger button.

    • Home

      When focus is on a trigger button, moves focus to the first trigger in the accordion.

    • End

      When focus is on a trigger button, moves focus to the last trigger in the accordion.