SChoice <s-choice>

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

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

उदाहरण

<SChoice> doesn't render on its own — it's an individual choice within an <SChoiceList>. Its value prop is what feeds the parent's values array (bound via v-model), and its default slot is the choice label.

EmailSMSPush notification

Selected: (none)

<script setup>
import { ref } from 'vue'
import { SChoiceList, SChoice } from 'polaris-vue-elements'

const value = ref([])
</script>

<template>
  <SChoiceList label="Notify me by" multiple v-model="value">
    <!-- Each SChoice's `value` is collected into SChoiceList's v-model array -->
    <SChoice value="email">Email</SChoice>
    <SChoice value="sms">SMS</SChoice>
    <SChoice value="push">Push notification</SChoice>
  </SChoiceList>
  <p>Selected: {{ value.join(', ') }}</p>
</template>

Props

Prop	Type	विवरण
accessibilityLabel	string	screen readers जैसी assistive technologies इस्तेमाल करने वाले users के लिए label। सेट होने पर, दिए गए children या label की घोषणा नहीं की जाएगी। इसका उपयोग किसी control को बिना visual label के दिखाने के लिए भी किया जा सकता है, जबकि screen readers इस्तेमाल करने वाले users को संदर्भ मिलता रहता है।
defaultSelected	boolean	क्या control डिफ़ॉल्ट रूप से active है।
disabled	boolean	control को disable करता है, जिससे कोई भी interaction संभव नहीं रहता।
selected	boolean	क्या control active है।
value	string	control के checked होने पर form data में उपयोग होने वाला मान।

Slots

Slot	विवरण
default	वह label जो उपयोगकर्ताओं के लिए इस चुनने योग्य विकल्प की पहचान करता है। label दी गई सामग्री के text nodes को निकालकर और जोड़कर बनाया जाता है; कोई भी markup या element संरचना अनदेखी कर दी जाती है।
details	input के लिए संदर्भ या मार्गदर्शन देने वाला अतिरिक्त text। user को अधिक जानकारी या निर्देश देने के लिए यह text input और उसके label के साथ दिखाया जाता है।
secondary-content	choice label के नीचे दिखाने के लिए अतिरिक्त content। इसमें TextFields, Buttons या अन्य interactive components जैसा rich content शामिल हो सकता है। React components पर event handlers सुरक्षित रहते हैं।