leptos-shadcn-ui/docs/components/api/accordion.md

Accordion Component API

A vertically collapsible component for organizing content into expandable sections.

---

Installation

# Cargo.toml
[dependencies]
shadcn-ui-leptos-accordion = "0.7"

use shadcn_ui_leptos_accordion::Accordion;

---

Import

use shadcn_ui_leptos_accordion::{
    Accordion,
    AccordionItem,
    AccordionTrigger,
    AccordionContent
};

---

Component API

Accordion

Root container managing accordion state.

Prop	Type	Default	Description
value	Signal<String>	Required	Currently open item
on_change	Option<Callback<String>>	None	Change handler
multiple	Signal<bool>	false	Allow multiple open
collapsible	Signal<bool>	true	Allow collapsing all
class	MaybeProp<String>	None	Additional CSS classes

AccordionItem

Individual accordion section.

Prop	Type	Default	Description
value	String	Required	Item identifier
disabled	Signal<bool>	false	Disable item

AccordionTrigger

Clickable header for accordion item.

Prop	Type	Default	Description
class	MaybeProp<String>	None	Additional CSS classes

AccordionContent

Collapsible content area.

Prop	Type	Default	Description
class	MaybeProp<String>	None	Additional CSS classes

---

Usage Examples

Basic Accordion

use leptos::prelude::*;
use shadcn_ui_leptos_accordion::*;

#[component]
pub fn MyComponent() -> impl IntoView {
    let (value, set_value) = signal("item-1".to_string());

    view! {
        <Accordion
            value=value.into()
            on_change=Some(Callback::new(move |v| set_value.set(v)))
        >
            <AccordionItem value="item-1">
                <AccordionTrigger>"Is it accessible?"</AccordionTrigger>
                <AccordionContent>
                    "Yes. It adheres to the WAI-ARIA design pattern."
                </AccordionContent>
            </AccordionItem>

            <AccordionItem value="item-2">
                <AccordionTrigger>"Is it styled?"</AccordionTrigger>
                <AccordionContent>
                    "Yes. It comes with default styles."
                </AccordionContent>
            </AccordionItem>
        </Accordion>
    }
}

---

CSS Classes

.accordion {
    border-b
}

.accordion-item {
    border-b
}

.accordion-trigger {
    flex flex-1 items-center justify-between
    py-4 font-medium transition-all
    hover:underline [&[data-state=open]>svg]:rotate-180
}

.accordion-content {
    overflow-hidden text-sm transition-all
}

.accordion-content[data-state=closed] {
    animate-accordion-up
}

.accordion-content[data-state=open] {
    animate-accordion-down
}

---

Accessibility

Keyboard Navigation

Key	Action
Tab	Navigate accordion
Enter/Space	Toggle section
Arrow Down	Next section
Arrow Up	Previous section
Home	First section
End	Last section

---

TypeScript API

interface AccordionProps {
  value: string;
  onChange?: (value: string) => void;
  multiple?: boolean;
  collapsible?: boolean;
  className?: string;
  children?: React.ReactNode;
}

export const Accordion: React.FC<AccordionProps>;
export const AccordionItem: React.FC<{ value: string; disabled?: boolean }>;
export const AccordionTrigger: React.FC<ComponentProps>;
export const AccordionContent: React.FC<ComponentProps>;

---

Source: packages/leptos/accordion/src/default.rs