SCheckbox `<s-checkbox>`

はい・いいえを選ぶ単一のチェックボックス。チェック状態を v-model でバインドできます。 SCheckbox は、Shopify Polaris の <s-checkbox> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

各チェックボックスを独立させる。 マーチャントが、あるチェックボックスが別のチェックボックスに影響することなく、任意の組み合わせでオプションを選択できるようにします。
すべてのチェックボックスにわかりやすい label を付ける。 これはチェックボックスで設定のオン・オフを切り替える場合に特に重要で、マーチャントが何を有効にするのかを正確に把握できるようにします。
オプションを論理的な順序で並べる。 アルファベット順、数値順、時系列順などで並べ、マーチャントが目的のオプションをすばやく見つけられるようにします。
indeterminate は部分的な「すべて選択」に限って使う。 グループ内の一部の項目だけがチェックされているときに、「すべて選択」チェックボックスで使います。
補足が役立つときは details を追加する。 ラベルだけでは不十分な場合に限り、オプションの働きを追加で説明するために使います。

vue

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

詳しいガイダンスについては、<s-checkbox> に関する Shopify のベストプラクティス（英語）を参照してください。

例

Checked: false

vue

<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 プロパティにバインドされ、change DOM イベントを監視します。

template

<SCheckbox v-model="value" />

これは次と同等です：

template

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

Props

Prop	型	説明
`accessibilityLabel`	`string`	スクリーンリーダーなどの支援技術を使用するユーザー向けのラベルです。設定すると、子要素や指定した `label` は読み上げられなくなります。視覚的なラベルなしでコントロールを表示しつつ、スクリーンリーダーを使用するユーザーにはコンテキストを提供する用途にも使用できます。
`checked`	`boolean`	コントロールがアクティブかどうか。
`defaultChecked`	`boolean`	コントロールがデフォルトでアクティブかどうか。
`defaultIndeterminate`	`boolean`	非制御コンポーネントの初期の不確定状態です。チェックボックスを不確定状態で開始したいが、その後は制御する必要がない場合に使用します。この値は、`indeterminate` が明示的に設定されるか、ユーザーがクリックしてチェックボックスの状態を変更するまで適用されます。
`details`	`any`	フィールドのコンテキストやガイダンスを提供する追加のテキストです。このテキストはフィールドとそのラベルとともに表示され、ユーザーに詳しい情報や手順を伝えます。スクリーンリーダーのユーザーにも公開されます。
`disabled`	`boolean`	コントロールを無効にし、あらゆる操作を受け付けないようにします。
`error`	`any`	ユーザーにエラーを示します。すぐに解決する必要がある問題を伝えるため、フィールドに特定のスタイルが適用されます。
`indeterminate`	`boolean`	チェックボックスを不確定状態（チェックありでもなしでもない状態）で表示するかどうか。通常、階層リストで部分的な選択を示すために使用されます。この視覚的な状態は、見た目の上でのみ `checked` prop より優先されます。フォーム送信時の値は引き続き `checked` prop によって決まります。`indeterminate` が明示的に設定されておらず、ユーザー操作によっても変更されていない場合は、`defaultIndeterminate` の値を返します。
`label`	`any`	コントロールのラベルとして使用するビジュアルコンテンツです。
`labelAccessibilityVisibility`	`"visible" \| "exclusive"`	コンポーネントのラベルの表示状態を変更します。 - `visible`: ラベルはすべてのユーザーに表示されます。 - `exclusive`: ラベルは視覚的に非表示になりますが、アクセシビリティツリーには残ります。
`name`	`string`	最も近い親の `Form` コンポーネント内で一意となる、コントロールの識別子です。
`required`	`boolean`	フィールドに値が必要かどうか。この要件はフィールドにセマンティックな意味を加えますが、エラーが自動的に表示されるわけではありません。このフィールドが空のときにエラーを表示したい場合は、`error` プロパティを使用してください。
`value`	`string`	コントロールがチェックされたときにフォームデータで使用される値です。

Events

Event	型
`blur`	`FocusEvent`
`change`	`Event`
`input`	`Event`

これらのイベントは <SCheckbox> 上で @blur 形式のリスナーで受け取れます。

Slots

Slot	説明
`details`
`error`

SCheckbox <s-checkbox> ​

ベストプラクティス ​

例 ​

v-model ​

Props ​

Events ​

Slots ​