SOption <s-option>

Eine Option innerhalb eines Selects. SOption ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-option>.

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

Beispiel

<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	Typ	Beschreibung
defaultSelected	boolean	Ob das Steuerelement standardmäßig aktiv ist.
disabled	boolean	Deaktiviert das Control und verhindert jegliche Interaktion.
selected	boolean	Ob das Steuerelement aktiv ist.
value	string	Der in den Formulardaten verwendete Wert, wenn das Steuerelement aktiviert ist.

Slots

Slot	Beschreibung
default	Der Text oder die Elemente, die als Beschriftung der Option angezeigt werden und die auswählbare Option in einem Dropdown oder einer Auswahlliste für Benutzer kennzeichnen.