SCheckbox <s-checkbox>

हाँ/नहीं वाले चुनाव के लिए एक अकेला checkbox, जिसकी checked state v-model से bind होती है। SCheckbox Shopify के Polaris <s-checkbox> web component का typed Vue 3 wrapper है।

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

Best practices

• हर checkbox को स्वतंत्र रखें। Merchants को विकल्पों का कोई भी संयोजन चुनने की सुविधा होनी चाहिए, बिना किसी एक checkbox के दूसरे पर असर डाले।
• हर checkbox को एक वर्णनात्मक label दें। यह सबसे ज़्यादा तब मायने रखता है जब कोई checkbox किसी setting को चालू या बंद करता है, ताकि merchants ठीक-ठीक जानें कि वे क्या enable कर रहे हैं।
• विकल्पों को तार्किक क्रम में रखें। उन्हें वर्णक्रम, संख्या या समय के अनुसार क्रमबद्ध करें, ताकि merchants अपना चाहा विकल्प जल्दी ढूँढ सकें।
• indeterminate को आंशिक "select all" के लिए रखें। इसे "select all" checkbox पर तब इस्तेमाल करें जब उसके समूह के केवल कुछ items ही checked हों।
• जब संदर्भ मददगार हो तो details जोड़ें। किसी विकल्प के काम को और समझाने के लिए इसका इस्तेमाल सिर्फ़ तभी करें जब अकेला label काफ़ी न हो।

<SCheckbox
  label="Send order confirmation emails"
  details="Customers get an email as soon as their order is placed."
/>

सभी सुझावों के लिए <s-checkbox> के लिए Shopify की best practices (अंग्रेज़ी में) देखें।

उदाहरण

Checked: false

<script setup>
import { ref } from 'vue'
import { SCheckbox } from 'polaris-vue-elements'

const value = ref(false)
</script>

<template>
  <SCheckbox label="Send me marketing emails" v-model="value" />
  <p>Checked: {{ value }}</p>
</template>

v-model

<SCheckbox> पर v-model checked property से bind होता है और change DOM event को सुनता है।

<SCheckbox v-model="value" />

इसके बराबर है:

<SCheckbox :checked="value" @change="value = $event.target.checked" />

Props

Prop	Type	विवरण
accessibilityLabel	string	screen readers जैसी assistive technologies इस्तेमाल करने वाले users के लिए label। सेट होने पर, दिए गए children या label की घोषणा नहीं की जाएगी। इसका उपयोग किसी control को बिना visual label के दिखाने के लिए भी किया जा सकता है, जबकि screen readers इस्तेमाल करने वाले users को संदर्भ मिलता रहता है।
checked	boolean	क्या control active है।
defaultChecked	boolean	क्या control डिफ़ॉल्ट रूप से active है।
defaultIndeterminate	boolean	uncontrolled components के लिए प्रारंभिक indeterminate state। इसका उपयोग तब करें जब आप चाहते हैं कि checkbox indeterminate state में शुरू हो, लेकिन बाद में उसे नियंत्रित करने की ज़रूरत न हो। यह मान तब तक लागू रहता है जब तक indeterminate स्पष्ट रूप से सेट न किया जाए या उपयोगकर्ता click करके checkbox की state न बदल दे।
details	any	field के लिए संदर्भ या मार्गदर्शन देने वाला अतिरिक्त text। user को अधिक जानकारी या निर्देश देने के लिए यह text field और उसके label के साथ दिखाया जाता है। यह screen reader users को भी उपलब्ध कराया जाएगा।
disabled	boolean	control को disable करता है, जिससे कोई भी interaction संभव नहीं रहता।
error	any	user को error बताएँ। field को एक विशेष style दिया जाएगा, ताकि ऐसी समस्याएँ बताई जा सकें जिन्हें तुरंत हल करना ज़रूरी है।
indeterminate	boolean	क्या checkbox indeterminate state (न checked, न unchecked) में दिखता है, जिसका उपयोग आमतौर पर hierarchical lists में आंशिक चयन दर्शाने के लिए होता है। यह visual state केवल दिखावट में checked prop से ऊपर प्राथमिकता रखती है। form submission का मान फिर भी checked prop से तय होता है। यदि indeterminate को स्पष्ट रूप से सेट नहीं किया गया है और उपयोगकर्ता की interaction से बदला नहीं गया है, तो यह defaultIndeterminate का मान लौटाता है।
label	any	control label के रूप में उपयोग की जाने वाली visual सामग्री।
labelAccessibilityVisibility	"visible" | "exclusive"	component के label की visibility बदलता है। - visible: label सभी users को दिखाई देता है। - exclusive: label दृश्य रूप से छिपा रहता है लेकिन accessibility tree में बना रहता है।
name	string	control के लिए identifier, जो सबसे नज़दीकी containing Form component के भीतर unique हो।
required	boolean	क्या field के लिए कोई मान ज़रूरी है। यह आवश्यकता field में semantic अर्थ जोड़ती है, लेकिन इससे अपने आप कोई error नहीं दिखेगा। यदि आप चाहते हैं कि यह field खाली होने पर error दिखे, तो आप error property के साथ ऐसा कर सकते हैं।
value	string	control के checked होने पर form data में उपयोग होने वाला मान।

Events

Event	Type
blur	FocusEvent
change	Event
input	Event

इन्हें <SCheckbox> पर @blur जैसे listeners से सुनें।

Slots

Slot	विवरण
details
error