maud-ui64 components

Accordion

FAQ

Yes. It adheres to the WAI-ARIA design pattern.

Multiple

Content for Section A with relevant information.

Content for Section C with more information.

Usage

use maud_ui::primitives::accordion;
use maud::html;

let html = accordion::render(accordion::Props {
    items: vec![
        accordion::Item { id: "faq-1".into(), trigger: "What is maud-ui?".into(), content: html! { p { "A component library for maud + htmx." } }, open: true },
        accordion::Item { id: "faq-2".into(), trigger: "Is it free?".into(), content: html! { p { "Yes, MIT licensed." } }, open: false },
    ],
    multiple: false,
});

Accordion

Collapsible vertical disclosure widget that can hold multiple expandable sections with optional single-open constraint.

Import

use maud_ui::primitives::accordion::{self, Item, Props};

Example

use maud::html;
use maud_ui::primitives::accordion;

html! {
    (accordion::render(accordion::Props {
        items: vec![
            accordion::Item {
                id: "item-1".to_string(),
                trigger: "What is this?".to_string(),
                content: html! { p { "This is the answer." } },
                open: false,
            },
        ],
        multiple: false,
        aria_label: Some("FAQ".to_string()),
    }))
}

Props

FieldTypeDefaultDescription
itemsVec[]Array of accordion items, each with id, trigger label, content markup, and open state.
multipleboolfalseIf true, multiple items can be open simultaneously; if false, only one item at a time.
aria_labelOptionNoneAccessible label for the accordion wrapper (emitted as aria-label); provide when there is no surrounding heading.

Item Struct

FieldTypeDescription
idStringUnique identifier for aria-controls and content linking.
triggerStringLabel text displayed in the trigger button.
contentMarkupMarkup content displayed when the item is expanded.
openboolInitial open state (default false).

Accessibility

  • Emits role="region" on content with aria-labelledby pointing to trigger.
  • Trigger button exposes aria-expanded (true/false) and aria-controls.
  • Chevron icon marked aria-hidden="true" to avoid double announcement.
  • aria-label on root required when accordion has no surrounding heading for screen reader context.

Related

Button, Collapsible, Dialog.

Shadcn reference

https://ui.shadcn.com/docs/components/base/accordion

← Back to Gallery