SChoiceList <s-choice-list>

import { SChoiceList } from 'polaris-vue-elements'

Example

EmailSMSPush notification

Selected: (none)

<script setup>
import { ref } from 'vue'
import { SChoiceList, SChoice } from 'polaris-vue-elements'

const value = ref([])
</script>

<template>
  <SChoiceList label="Notify me by" multiple v-model="value">
    <SChoice value="email">Email</SChoice>
    <SChoice value="sms">SMS</SChoice>
    <SChoice value="push">Push notification</SChoice>
  </SChoiceList>
  <p>Selected: {{ value.join(', ') }}</p>
</template>

v-model

v-model on <SChoiceList> binds to the values property and listens for the change DOM event.

<SChoiceList v-model="value" />

is equivalent to:

<SChoiceList :values="value" @change="value = $event.target.values" />

Props

Prop	Type	Description
details	any	Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user. This will also be exposed to screen reader users.
disabled	boolean	Disables the field, disallowing any interaction. disabled on any child choices is ignored when this is true.
error	any	Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.
label	any	Content to use as the field label.
labelAccessibilityVisibility	"visible" | "exclusive"	Changes the visibility of the component's label. - visible: the label is visible to all users. - exclusive: the label is visually hidden but remains in the accessibility tree.
multiple	boolean	Whether multiple choices can be selected.
name	string	An identifier for the field that is unique within the nearest containing form.
values	string[]	An array of the values of the selected options. This is a convenience prop for setting the selected prop on child options.

Events

Event	Type
change	CustomEvent
input	CustomEvent

Listen for these with @change-style listeners on <SChoiceList>.

Slots

Slot	Description
default	The choices a user can select from. Accepts Choice components.