SOption <s-option>

किसी select के भीतर एक विकल्प। SOption Shopify के Polaris <s-option> web component का typed Vue 3 wrapper है।

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

उदाहरण

<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	विवरण
defaultSelected	boolean	क्या control डिफ़ॉल्ट रूप से active है।
disabled	boolean	control को disable करता है, जिससे कोई भी interaction संभव नहीं रहता।
selected	boolean	क्या control active है।
value	string	control के checked होने पर form data में उपयोग होने वाला मान।

Slots

Slot	विवरण
default	option label के रूप में दिखाए जाने वाले text या elements, जो dropdown या selection list में उपयोगकर्ताओं के लिए चुनने योग्य विकल्प की पहचान करते हैं।