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

sc-accordion-root
Slot: default
sc-accordion-item
Slot: default
sc-accordion-trigger
Slot: default You need to place an sc-button here.
sc-button
Slot: default
sc-accordion-icon
sc-accordion-content-wrapper
Slot: default
sc-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

      • 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.

      • 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.

    • 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

    • Trigger

      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.

      • Shift
        +Tab

        Moves focus to the previous focusable element within the accordion.

      • Tab

        Moves focus to the next focusable element within the accordion.

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