Section

A band header over hairline-divided rows: title, caption, count and glyph, foldable, tinted; no title = just the rows.

Group: Lists · Kind: macro · in the lite catalog

Preview

open

In progress

Release 0.18

4 steps

Build the macOS app

done

Notarize

running

Upload the dmg

queued

Publish the release notes

queued

Release 0.17

3 steps

Open in the playground

Platforms

The same specimen painted by React, SwiftUI, Compose and gpui.

Variants

collapsible

In progress

tint · neutral

In progress

tint · primary

In progress

tint · success

In progress

tint · warning

In progress

tint · danger

In progress

tint · info

In progress

tree

In progress

Props

Prop	Type	Required	Bindable	Description
title	string	–	yes	The band’s label; omit it for a bare run of rows.
caption	string	–	yes	Muted text after the title.
count	number	–	yes	A count after the title; off unless given.
icon	icon	–	–	A glyph before the title (the leading slot replaces it).
collapsible	boolean	–	–	The header folds the rows (chevron, press). Default false.
open	boolean	–	yes	Whether the rows show; bind it. Default true.
tint	neutral | primary | success | warning | danger | info	–	–	The band’s colour tone. Default "neutral".
tree	boolean	–	–	The rows form a tree: each Row.depth indents and draws its guides. Default false.
loading	boolean	–	yes	A refetch is running: a small spinner before the count. The first load is a Skeleton instead. Default false.
style	style	–	–	Extra Box styles for the frame.

Events

• on.change: runs an action

Slots

• leading: one component by id
• trailing: one component by id

Children

many

A2UI basic mapping

No basic catalog component maps here.

Built from

Box · Icon · List · Spinner · Text

Accessibility

Role: group

group; the header a heading (level 3) with the caption and count in its name, or a button with aria-expanded when collapsible; the rows a list (a tree when tree) of listitems

Keys	Action
Enter Space	fold when collapsible

Theming

Recipe parts: Section/root Section/header Section/chevron Section/icon Section/title Section/caption Section/loading Section/count Section/spacer Section/body

Keyed by: tint tree open collapsible :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover

Themes · Write a theme

Related

Icon · List · Spinner · Text · Group · Trace · TraceItem · Plan