SOptionGroup <s-option-group>

Gruppiert zusammengehörige Optionen innerhalb eines Selects unter einem gemeinsamen Label. SOptionGroup ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-option-group>.

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

Beispiel

<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	Typ	Beschreibung
disabled	boolean	Ob die Optionen innerhalb dieser Gruppe ausgewählt werden können.
label	string	Die für Benutzer sichtbare Beschriftung dieser Optionsgruppe.

Slots

Slot	Beschreibung
default	Die auswählbaren Optionen in der Dropdown-Liste. Akzeptiert Option-Komponenten für einzelne auswählbare Einträge innerhalb dieser Gruppe.