SChoice <s-choice>

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

Example

<SChoice> doesn't render on its own — it's an individual choice within an <SChoiceList>. Its value prop is what feeds the parent's values array (bound via v-model), and its default slot is the choice label.

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">
    <!-- Each SChoice's `value` is collected into SChoiceList's v-model array -->
    <SChoice value="email">Email</SChoice>
    <SChoice value="sms">SMS</SChoice>
    <SChoice value="push">Push notification</SChoice>
  </SChoiceList>
  <p>Selected: {{ value.join(', ') }}</p>
</template>

Props

Prop	Type	Description
accessibilityLabel	string	A label used for users using assistive technologies like screen readers. When set, any children or label supplied will not be announced. This can also be used to display a control without a visual label, while still providing context to users using screen readers.
defaultSelected	boolean	Whether the control is active by default.
disabled	boolean	Disables the control, disallowing any interaction.
selected	boolean	Whether the control is active.
value	string	The value used in form data when the control is checked.

Slots

Slot	Description
default	Content to use as the choice label. The label is produced by extracting and concatenating the text nodes from the provided content; any markup or element structure is ignored.
details	Additional text to provide context or guidance for the input. This text is displayed along with the input and its label to offer more information or instructions to the user.
secondary-content	Additional content to display below the choice label. Can include rich content like TextFields, Buttons, or other interactive components. Event handlers on React components are preserved.