Group macrolite

A form-field container: a rounded group of rows with an optional title and footnote.

Built from: Box Text
Children: many

Preview

Loading the renderer…

title

footer

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Group",
          "title": "Notifications",
          "children": [
            "c0-r1",
            "c0-r2"
          ]
        },
        {
          "id": "c0-r1",
          "component": "Row",
          "title": "Mentions",
          "meta": "Push + email",
          "pressable": true
        },
        {
          "id": "c0-r2",
          "component": "Row",
          "title": "Assigned to me",
          "meta": "Push",
          "pressable": true
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

Group rendered by the React renderer on Web — **Web** React

Group rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

Group rendered by the Compose renderer on Android — **Android** Compose

Group rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-group, painted by each native renderer.

Props

Prop	Type	Default	Description
`title`	`string`	–	A caption above the group.
`footer`	`string`	–	A muted note under the group.

Events and slots

No events, no slots. Children: many.

Accessibility

Role: group
Semantics: group labelled by its title, described by its footer

Not focusable; no keys.

Theming

Recipe parts: Group/rootGroup/titleGroup/bodyGroup/footer
Keyed by: :hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme

In the Exponential app

Group container

EXP-994: THE settings shell, one per platform — borderless: radius 12, the row fill, a hairline BETWEEN every pair of children, overflow hidden.

The fill is the edge, never an outer stroke, and never a card inside a card: inside an overlay that already is a surface (the composer's ⋯ popover, a bottom sheet) the group goes BARE — dividers only, no fill, no radius — so the host's edge is the only edge. Every grouped settings list on every platform draws this; the second specimen is the bare form. Its picker rows are `Picker triggerVariant="row"`, never a Combobox (the Combobox engine is internal to Picker since EXP-1249).

Webok

GlassGrouppackages/ui/src/glass-rows.tsx

iOSok

GlassSectionapps/ios/ExpUI/Sources/GlassTheme.swift

Androidok

Modifier.glassGroup()apps/android/app/src/main/java/com/exponential/app/ui/theme/Glass.kt

OptionGroup in ui/components/SheetOptionRows.kt is the list wrapper around it.

Desktopok

surface::glass_group / glass_group_rowsapps/desktop/crates/ui/src/surface.rs