Accordion — HeroGPUI

Usage

Titles, subtitles and body text keep their line heights when used inside larger text containers.

Live example

Rust

1use herogpui::prelude::{Accordion, AccordionItem};
2
3Accordion::new(items())
4    .id("accordion")
5    .default_expanded("1")

Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.

Anatomy

Rust types

AccordionAccordionItem

Accordion is assembled from these builders. The API reference lists each one.

Customization

Appearance builders and theme tokens Accordion uses.

Styling

Accordion styling
Style	Description
`w_full()`	The full-width layout matches; GPUI has no CSS containment switch.
`text_size(px(14.)) + line_height(px(20.))`	Body content uses 14px type with a 20px line height independently of host leading.
`px(16.) pt(0.) pb(16.) text_color(muted)`	Horizontal and bottom inset, zero top inset and muted color match.
`header flex`	The trigger row supplies the layout without a separate heading wrapper.
`size(16.) flex_shrink_0 + indicator(render)`	Size, trailing placement and custom content match; built-in glyphs swap without rotation interpolation.
`h(1.) w_full hairline_radius separator`	The same one-pixel rule is a flow child rather than an absolute pseudo-element.
`flex items_center justify_between px(16.) py(16.) text 14 medium`	Trigger geometry and typography match.
`immediate style state`	Reaches focus and disabled endpoints without interpolating them.
`!is_open hover(default.soft)`	Hover is correctly limited to closed triggers; the default variant uses default-soft rather than the exact foreground mix.
`conditional body child`	Expanded content is laid out at its endpoint and collapsed content leaves immediately.
`surface.background + container_radius + overflow_hidden`	Surface fill, clipped radius and absence of an extra shadow match.
`mx(relative(.03)) w(relative(.94)) separator`	Inset geometry matches; the semantic separator token supplies the line color.

API reference

Builders

Accordion builders
Builder	Type	Default	Description
`allows_multiple_expanded(bool)`	`bool`	`false`	Allows more than one item to remain expanded.
`default_expanded_keys(keys)`	`iterable of keys`	—	Seeds the uncontrolled expanded-key set.
`expanded_keys(keys)`	`iterable of keys`	—	The caller-owned expanded-key set.
`on_expanded_change(callback)`	`Fn(keys: Set<Key>) -> ()`	—	Reports the complete proposed expanded-key set.
`is_disabled(bool)`	`bool`	`false`	Disables every item trigger.
`variant(AccordionVariant)`	`AccordionVariant`	`AccordionVariant::Default`	Selects the flush or rounded surface treatment.
`hide_separator(bool)`	`bool`	`false`	Hides the rules between items.
`new(items)`	`items`	—	Typed AccordionItem values replace arbitrary compound children.
`new(key, title)`	`key, title`	—	Stable item identity used by every expanded and disabled set.
`default_expanded(bool)`	`bool`	`false`	Seeds this item into the uncontrolled group set.
`new(key, title) + subtitle(text) + indicator(render) + content(body)`	`key, title) + subtitle(text) + indicator(render) + content(body`	—	Title, optional subtitle, indicator and body are typed composition seams.
`new(key, title) + subtitle(text)`	`key, title) + subtitle(text`	—	The title and subtitle are typed text; the indicator is independently replaceable.
`on_toggle(callback)`	`Fn() -> ()`	—	Reports the key whose trigger was pressed.
`content(body)`	`body`	—	Caller-provided panel body content.
`indicator(render)`	`AnyElement`	`AnyElement::Chevron`	Custom indicator content receives the live item state.

Parts

Accordion parts
Part	Description
`Accordion`	Full-width owner of item expansion and presentation.
`AccordionItem`	Keyed item holding trigger and body configuration.
`AccordionItem`	Heading semantics are folded into the trigger row because GPUI has no heading accessibility node.
`AccordionItem`	Focusable, pointer-pressable item header.
`AccordionItem`	Built-in chevron or caller content receiving AccordionItemState.
`AccordionItem`	Expanded body host; collapsed content leaves the tree.
`AccordionItem`	Padded, muted body around caller content.

States

Accordion states
Builder	State	Description
`expanded_keys + AccordionItemState::is_expanded`	`Expanded`	Shows the panel and supplies true to custom indicator content.
`!is_open header.hover(default.soft)`	`Hovered`	Only a closed enabled trigger receives the hover fill.
`tab_stop_handle + with_focus_ring`	`Focus visible`	Keyboard focus draws the inset status ring on the trigger.
`is_disabled + disabled_keys + AccordionItem::is_disabled`	`Disabled`	Group, keyed-set and item flags remove press and focus while dimming the trigger.
`allows_multiple_expanded(false)`	`Single expansion`	Opening an item replaces the previous expanded set by default.
`allows_multiple_expanded(true)`	`Multiple expansion`	Opening an item preserves expanded siblings.

Breadcrumbs Disclosure Link Pagination Tabs