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

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

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

made for toddle