Accordion

A vertically stacked set of interactive headings that each reveal a section of content. Composed of Accordion and AccordionItem.

When to use

• Grouping related content into collapsible sections.
• Reducing vertical space on dense pages (FAQs, settings, filters).

API

Accordion::new()

A container for accordion items. Add items with .child(...).

Method	Type	Description
.child(child)	impl IntoElement	Append an AccordionItem

AccordionItem::new(id, trigger_label)

An individual expandable item. The id must be unique among siblings.

Method	Type	Default	Description
.open(open)	bool	false	Whether the item is expanded
.on_toggle(fn)	Fn(&ClickEvent, &mut Window, &mut App)	—	Toggle handler
.child(child)	impl IntoElement	—	Expanded content

Usage

use gpui::{Component, div, prelude::*};
use components::{Accordion, AccordionItem};

div().child(Component::new(
    Accordion::new()
        .child(Component::new(
            AccordionItem::new("item-1", "Is it animated?")
                .open(this.item_1_open)
                .on_toggle(cx.listener(|this, _, _, cx| {
                    this.item_1_open = !this.item_1_open;
                    cx.notify();
                }))
                .child("Yes. It has smooth state transitions."),
        )),
))

Copy the source

crates/components/src/accordion.rs — self-contained, stateless, and free to modify.