ChoiceTiles
Picture tiles picking one or many values; options show image and description.
Group: Inputs · Kind: native
Preview
Section titled “Preview”example
type · single
type · multiple
disabled · true
Platforms
Section titled “Platforms”The same specimen painted by React, SwiftUI, Compose and gpui.
| Prop | Type | Required | Bindable | Description |
|---|---|---|---|---|
name |
string |
yes | – | The field’s key in the submitted data. |
options |
[option] |
yes | – | The choices in order. |
type |
single | multiple |
– | – | One pick or several. Default "single". |
value |
string |
– | yes | The pick (comma-joined when multiple); bind it. |
columns |
number |
– | – | Tiles per row. Default 2. |
disabled |
boolean |
– | – | Inert. Default false. |
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”No basic catalog component maps here.
Built from
Section titled “Built from”A native component: every renderer paints it directly.
Accessibility
Section titled “Accessibility”Role: radiogroup
radiogroup of radio tiles (single) or a group of checkbox tiles (multiple); the picture is decorative, the label names the tile
| Keys | Action |
|---|---|
| – | Roving tab stop on the picked tile (the first when none) |
ArrowRight ArrowLeft ArrowDown ArrowUp |
move focus (wraps); single: picks |
Space Enter |
toggle the focused tile |
Theming
Section titled “Theming”Recipe parts: ChoiceTiles/root ChoiceTiles/tile ChoiceTiles/picture ChoiceTiles/label ChoiceTiles/description
Keyed by: type columns :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover
Related
Section titled “Related”Form · FieldGroup · FormActions · Input · Textarea · NumberField · Checkbox · Radio