Accordion

Vertically stacked collapsible sections. Supports single or multiple open items.

Primitive: AccordionARIA: aria-expanded + role="region"Keyboard: Enter, Space, Arrow, Home, End

Is it accessible? −

Yes. It adheres to the WAI-ARIA design pattern for accordions. All triggers and panels have correct ARIA relationships.

Is it styled? +

Can I use it with Dioxus? +

accordion.rs

use stratum_leptos::*;

view! {
    <Accordion collapsible=true>
        <AccordionItem value="a11y">
            <AccordionTrigger>
                "Is it accessible?"
            </AccordionTrigger>
            <AccordionContent>
                "Yes. Full WAI-ARIA compliance."
            </AccordionContent>
        </AccordionItem>
    </Accordion>
}

Installation

stratum add accordion

Props

Prop	Type	Default	Description
value	Option<Vec<String>>	None	Controlled open items
default_value	Vec<String>	[]	Initially open items
multiple	bool	false	Allow multiple sections open
collapsible	bool	true	Allow all sections to be closed
disabled	bool	false	Disables all items
on_value_change	Option<Callback<Vec<String>>>	None	Fires when open items change

Accessibility

Triggers: aria-expanded, aria-controls pointing to content panel.
Content panels: role="region", aria-labelledby pointing to trigger.
Enter/Space toggle sections. Arrow keys navigate between triggers.
Home/End focus first/last trigger.

Source

Primitive: accordion.rs
Styled: accordion.rs