SChoice <s-choice>

Une option dans une liste de choix. SChoice est le wrapper Vue 3 typé du web component <s-choice> de Shopify Polaris.

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

Exemple

<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	Un libellé destiné aux utilisateurs de technologies d'assistance comme les lecteurs d'écran. Lorsqu'il est défini, les enfants ou le label fournis ne sont pas annoncés. Il permet aussi d'afficher un contrôle sans libellé visible, tout en apportant du contexte aux utilisateurs de lecteurs d'écran.
defaultSelected	boolean	Indique si le contrôle est actif par défaut.
disabled	boolean	Désactive le contrôle, empêchant toute interaction.
selected	boolean	Indique si le contrôle est actif.
value	string	La valeur utilisée dans les données du formulaire lorsque le contrôle est coché.

Slots

Slot	Description
default	Le libellé qui identifie cette option sélectionnable auprès des utilisateurs. Le libellé est obtenu en extrayant et en concaténant les nœuds texte du contenu fourni ; tout balisage ou toute structure d'éléments est ignoré.
details	Texte supplémentaire apportant du contexte ou des indications pour la saisie. Ce texte est affiché avec la saisie et son libellé afin de fournir davantage d'informations ou d'instructions à l'utilisateur.
secondary-content	Contenu supplémentaire à afficher sous le libellé du choix. Peut inclure du contenu riche comme des TextFields, des Buttons ou d'autres composants interactifs. Les gestionnaires d'événements des composants React sont conservés.