Forms
ChoiceList
Radio/checkbox group with v-model support. Wraps the Polaris <s-choice-list> web component.
Usage
<script setup>
const selected = ref(['email'])
</script>
<template>
<ShChoiceList v-model="selected" label="Notification methods" multiple>
<ShChoice value="email">Email</ShChoice>
<ShChoice value="sms">SMS</ShChoice>
<ShChoice value="push">Push notification</ShChoice>
</ShChoiceList>
</template>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | string[] | — | Bound values (use with v-model) |
label | string | — | Group label |
multiple | boolean | — | Allow multiple selections (checkboxes) |
error | string | — | Error message |
details | string | — | Help text below the list |
labelAccessibilityVisibility | 'visible' | 'exclusive' | — | Label visibility for assistive tech |
disabled | boolean | — | Disables all choices |
name | string | — | Form field name |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | string[] | Emitted when selection changes |
change | Event | Native change event |
input | Event | Native input event |
Slots
| Slot | Description |
|---|---|
default | <ShChoice> child components |
Polaris Element
Renders as <s-choice-list>. See Polaris ChoiceList docs.