SOption <s-option>

Une option dans un select. SOption est le wrapper Vue 3 typé du web component <s-option> de Shopify Polaris.

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

Exemple

<SOption> doesn't render on its own — it's an option within an <SSelect> (optionally grouped by <SOptionGroup>). Its value prop is what gets bound into the parent's v-model, and its default slot is the visible option label.

United StatesCanadaFranceGermany

Value: (none)

<script setup>
import { ref } from 'vue'
import { SSelect, SOption, SOptionGroup } from 'polaris-vue-elements'

const value = ref('')
</script>

<template>
  <SSelect label="Shipping region" placeholder="Select a region" v-model="value">
    <SOptionGroup label="North America">
      <!-- Each SOption's `value` is what SSelect's v-model receives -->
      <SOption value="us">United States</SOption>
      <SOption value="ca">Canada</SOption>
    </SOptionGroup>
    <SOptionGroup label="Europe">
      <SOption value="fr">France</SOption>
      <SOption value="de">Germany</SOption>
    </SOptionGroup>
  </SSelect>
  <p>Value: {{ value }}</p>
</template>

Props

Prop	Type	Description
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 texte ou les éléments affichés comme libellé de l'option, qui identifient le choix sélectionnable auprès des utilisateurs dans une liste déroulante ou une liste de sélection.