gpui-component/docs/docs/components/accordion.md

title	description
Accordion	The accordion uses collapse internally to make it collapsible.

Accordion

An accordion component that allows users to show and hide sections of content. It uses collapse functionality internally to create collapsible panels.

Import

use gpui_component::accordion::Accordion;

Usage

Basic Accordion

Accordion::new("my-accordion")
    .item(|item| {
        item.title("Section 1")
            .child("Content for section 1")
    })
    .item(|item| {
        item.title("Section 2")
            .child("Content for section 2")
    })
    .item(|item| {
        item.title("Section 3")
            .child("Content for section 3")
    })

Multiple Open Items

By default, only one accordion item can be open at a time. Use multiple() to allow multiple items to be open:

Accordion::new("my-accordion")
    .multiple(true)
    .item(|item| item.title("Section 1").child("Content 1"))
    .item(|item| item.title("Section 2").child("Content 2"))

With Borders

Accordion::new("my-accordion")
    .bordered(true)
    .item(|item| item.title("Section 1").child("Content 1"))

Different Sizes

use gpui_component::{Sizable as _, Size};

Accordion::new("my-accordion")
    .small()
    .item(|item| item.title("Small Section").child("Content"))

Accordion::new("my-accordion")
    .large()
    .item(|item| item.title("Large Section").child("Content"))

Handle Toggle Events

Accordion::new("my-accordion")
    .on_toggle_click(|open_indices, window, cx| {
        println!("Open items: {:?}", open_indices);
    })
    .item(|item| item.title("Section 1").child("Content 1"))

Disabled State

Accordion::new("my-accordion")
    .disabled(true)
    .item(|item| item.title("Disabled Section").child("Content"))

API Reference

• Accordion
• AccordionItem

Sizing

Implements Sizable trait:

• small() - Small size
• medium() - Medium size (default)
• large() - Large size
• xsmall() - Extra small size

Examples

With Custom Icons

Accordion::new("my-accordion")
    .item(|item| {
        item.title(
            h_flex()
                .gap_2()
                .child(Icon::new(IconName::Settings))
                .child("Settings")
        )
        .child("Settings content here")
    })

Nested Accordions

Accordion::new("outer")
    .item(|item| {
        item.title("Parent Section")
            .content(
                Accordion::new("inner")
                    .item(|item| item.title("Child 1").child("Content"))
                    .item(|item| item.title("Child 2").child("Content"))
            )
    })