Accordion

A vertically stacked set of interactive buttons that reveal or hide their associated content sections. Provides an organized way to present information in collapsible panels.

Full keyboard navigation

Can expand one or multiple items

Uncontrolled mode for easy implementation

Architecture

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

Reference

  • Accordion

    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.

      • disabled
        boolean
        /
        default: false

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

      • type
        enum
        /
        default: single

        Determines whether one or multiple items can be expanded simultaneously.

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

      • value
        string
        /
        default: -

        A unique identifier for the item. Used to control and track the 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.

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.

  • Moves focus to the next trigger button.

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

made for toddle