Segmented nativelite

ONE row of segments selecting one or many values: the pill-track segmented control, bare toggles, joined outline buttons or a bottom bar of destinations.

Replaces: ButtonGroupTabBarToggleGroup
A2UI basic: ChoicePicker (chips)
Children: none

Preview

Loading the renderer…

itemsrequired

type

value

variant

size

fill

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": "start",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Segmented",
          "items": [
            {
              "label": "List",
              "value": "list"
            },
            {
              "label": "Board",
              "value": "board"
            }
          ],
          "value": "list"
        }
      ]
    }
  }
]

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

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

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

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

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

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

Variants

type · single

type · multiple

variant · segmented

variant · toggles

variant · outline

variant · bar

size · sm

size · default

size · lg

fill

Props

Prop	Type	Default	Description
`items`required	`[option]`	–	The segments in order.
`type`	`single \| multiple`	`"single"`	One active value or several.
`value`bind	`string`	–	The selected value (comma-joined when multiple); bind it.
`variant`	`segmented \| toggles \| outline \| bar`	`"segmented"`	The segmented track, bare `toggles`, joined `outline` buttons, or a full-width `bar` with icons over labels.
`size`	`sm \| default \| lg`	`"default"`	Control height class.
`fill`	`boolean`	`false`	Stretches the segments across the width (a `bar` always does).

Events and slots

Name	Kind
`on.change`	event: runs an action

Accessibility

Role: radiogroup
Semantics: radiogroup (single) or toolbar of toggle buttons (multiple); bar = navigation of buttons, the selected one aria-current=page

Keys	Action
–	Roving tab stop
`ArrowLeftArrowRight (ArrowUpArrowDown)`	move focus (wraps)
`HomeEnd`	first/last
`SpaceEnter`	toggle the focused item

Theming

Recipe parts: Segmented/rootSegmented/itemSegmented/iconSegmented/label
Keyed by: typevariantsizefill:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme

In the Exponential app

Embedded tabs row

The segmented control as the FIRST row of a group: padding 8, full width, no fill and no stroke of its own.

Webok

GlassTabsRowpackages/ui/src/glass-rows.tsx

iOSok

GlassSegmentedControl(style: .embedded)apps/ios/ExpUI/Sources/GlassSegmentedControl.swift

Androidok

GlassSegmentedControl(embedded = true)apps/android/app/src/main/java/com/exponential/app/ui/components/GlassSegmentedControl.kt

Desktopok

controls::rows::glass_tabs_rowapps/desktop/crates/exponential-ui-gpui/src/controls/rows.rs

Segmented control

The standalone capsule: 36 tall, padding 3, the section fill under a section stroke.

Segments share the embedded row's geometry — EXP-941 made that second form a prop rather than a second component, so the settings strips and the free-floating ones are one control. Eight strips wired their own Tabs + TabsList + N triggers by hand before, and drifted in padding and in whether a segment carried a glyph; the class recipe still lives in tabs.tsx, which other surfaces read directly.

Webok

SegmentedControlpackages/ui/src/segmented-control.tsx

the SEGMENTED_* class constants stay in tabs.tsx byte-identical; this renders the strip from an option array

iOSok

GlassSegmentedControlapps/ios/ExpUI/Sources/GlassSegmentedControl.swift

Androidok

GlassSegmentedControlapps/android/app/src/main/java/com/exponential/app/ui/components/GlassSegmentedControl.kt

Desktopok

controls::rows::segmentedapps/desktop/crates/exponential-ui-gpui/src/controls/rows.rs