Component Catalog
ChoicePicker
Single or multi-select options — radio group or checkbox list.
A2UI → Nuxt UI Mapping
| A2UI Variant | Nuxt UI Component |
|---|---|
"mutuallyExclusive" (default) | URadioGroup |
"multipleSelection" | Multiple UCheckbox components |
Example JSONL
Mutually Exclusive (Radio)
{"version":"v0.10","createSurface":{"surfaceId":"choice_demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"choice_demo","components":[
{"id":"root","component":"Column","children":["theme"]},
{"id":"theme","component":"ChoicePicker","label":"Theme","options":[
{"label":"Light","value":"light"},
{"label":"Dark","value":"dark"},
{"label":"System","value":"system"}
],"value":["dark"],"variant":"mutuallyExclusive"}
]}}
Multiple Selection (Checkboxes)
{"version":"v0.10","createSurface":{"surfaceId":"multi_demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"multi_demo","components":[
{"id":"root","component":"Column","children":["toppings"]},
{"id":"toppings","component":"ChoicePicker","label":"Toppings","options":[
{"label":"Cheese","value":"cheese"},
{"label":"Pepperoni","value":"pepperoni"},
{"label":"Mushrooms","value":"mushrooms"}
],"value":["cheese","pepperoni"],"variant":"multipleSelection"}
]}}
Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
options | array | ✅ | — | Array of { label, value } objects |
value | array | — | [] | Selected value(s) |
variant | enum | — | "mutuallyExclusive" | "mutuallyExclusive" or "multipleSelection" |
label | string | — | — | Group label displayed above options |
Try It
Copy either JSONL above and paste it in the Playground Paste tab.