Radio native

A labelled group of radio options choosing one value; bind value.

A2UI basic: ChoicePicker
Children: none

Preview

Loading the renderer…

label

namerequired

optionsrequired

value

orientation

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": "Radio",
          "label": "Plan",
          "name": "plan",
          "options": [
            {
              "label": "Free",
              "value": "free"
            },
            {
              "label": "Team",
              "value": "team"
            }
          ],
          "value": "free"
        }
      ]
    }
  }
]

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

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

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

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

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

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

Variants

orientation · horizontal

orientation · vertical

Props

Prop	Type	Default	Description
`label`	`string`	–	The group label.
`name`required	`string`	–	The field's key in the submitted data.
`options`required	`[option]`	–	The choices in order.
`value`bind	`string`	–	The chosen value; bind it.
`orientation`	`horizontal \| vertical`	`"vertical"`	Stacked or in a row.
`checks`	`[check]`	–	Validation rules.

Events and slots

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

Accessibility

Role: radiogroup
Semantics: radiogroup / radio

Keys	Action
–	Roving tab stop on the checked option
`ArrowDownArrowRight`	next option, selecting it (wraps)
`ArrowUpArrowLeft`	previous option

Theming

Recipe parts: Radio/rootRadio/itemRadio/dotRadio/labelRadio/items
Keyed by: orientation:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme