Radio
A labelled group of radio options choosing one value; bind value.
Group: Inputs · Kind: native
Preview
Section titled “Preview”example
Plan
orientation · horizontal
Plan
orientation · vertical
Plan
Platforms
Section titled “Platforms”The same specimen painted by React, SwiftUI, Compose and gpui.
| Prop | Type | Required | Bindable | Description |
|---|---|---|---|---|
label |
string |
– | – | The group label. |
name |
string |
yes | – | The field’s key in the submitted data. |
options |
[option] |
yes | – | The choices in order. |
value |
string |
– | yes | The chosen value; bind it. |
orientation |
horizontal | vertical |
– | – | Stacked or in a row. Default "vertical". |
checks |
[check] |
– | – | Validation rules. |
Events
Section titled “Events”on.change: runs an action
None.
Children
Section titled “Children”none
A2UI basic mapping
Section titled “A2UI basic mapping”The basic catalog’s ChoicePicker renders as Radio.
Built from
Section titled “Built from”A native component: every renderer paints it directly.
Accessibility
Section titled “Accessibility”Role: radiogroup
radiogroup / radio
| Keys | Action |
|---|---|
| – | Roving tab stop on the checked option |
ArrowDown ArrowRight |
next option, selecting it (wraps) |
ArrowUp ArrowLeft |
previous option |
Theming
Section titled “Theming”Recipe parts: Radio/root Radio/item Radio/dot Radio/label Radio/items
Keyed by: orientation :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover
Related
Section titled “Related”Form · FieldGroup · FormActions · Input · Textarea · NumberField · Checkbox · ChoiceTiles