SOptionGroup <s-option-group>

Regroupe des options liées d'un select sous un libellé commun. SOptionGroup est le wrapper Vue 3 typé du web component <s-option-group> de Shopify Polaris.

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

Exemple

<SOptionGroup> doesn't render on its own — it groups related <SOption> children under a label inside an <SSelect>.

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 labels a cluster of SOption children -->
    <SOptionGroup label="North America">
      <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
disabled	boolean	Indique si les options de ce groupe peuvent être sélectionnées ou non.
label	string	Le libellé, visible par l'utilisateur, de ce groupe d'options.

Slots

Slot	Description
default	Les options sélectionnables affichées dans la liste déroulante. Accepte des composants option pour les éléments sélectionnables individuels de ce groupe.