SChoiceList `<s-choice-list>`

1 つまたは複数の選択肢を選ぶための、ラジオボタンやチェックボックスのグループ。 SChoiceList は、Shopify Polaris の <s-choice-list> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

選択モードを選択肢に合わせる。 支払い方法や配送スピードのように互いに排他的な選択肢には単一選択を使い、マーチャントが複数選べる場合は multiple を設定します。
選択肢のラベルで結果を説明する。 「Email」よりも「Email notifications for new orders」のほうが多くを伝えます。ラベルは短く、それでいて単独で意味が通じる明確さを保ちます。
label は質問または文の形にする。 「Which shipping method?」や「Select notification preferences」のようなタイトルは、「Options」や「Settings」のような曖昧な語よりも多くをマーチャントに伝えます。
複雑な選択肢は details スロットで説明する。 その選択肢を選ぶと何が起きるかをマーチャントが理解する必要がある場合は、個々の SChoice に details を追加します。
error メッセージは具体的にする。 汎用的な「Required field」ではなく、「Select at least one notification preference」のように、何が足りないのかを正確に伝えます。

vue

<SChoiceList label="Which shipping method?">
  <SChoice value="standard">Standard shipping</SChoice>
  <SChoice value="express">
    Express shipping
    <template #details>
      <SText>Costs more, but orders arrive in 1–2 business days.</SText>
    </template>
  </SChoice>
</SChoiceList>

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

例

SMS

Push notification

Selected: (none)

vue

<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">
    <SChoice value="email">Email</SChoice>
    <SChoice value="sms">SMS</SChoice>
    <SChoice value="push">Push notification</SChoice>
  </SChoiceList>
  <p>Selected: {{ value.join(', ') }}</p>
</template>

v-model

<SChoiceList> の v-model は values プロパティにバインドされ、change DOM イベントを監視します。

template

<SChoiceList v-model="value" />

これは次と同等です：

template

<SChoiceList :values="value" @change="value = $event.target.values" />

Props

Prop	型	説明
`details`	`any`	フィールドのコンテキストやガイダンスを提供する追加のテキストです。このテキストはフィールドとそのラベルとともに表示され、ユーザーに詳しい情報や手順を伝えます。スクリーンリーダーのユーザーにも公開されます。
`disabled`	`boolean`	フィールドを無効にして、ユーザーによる操作をすべて防ぐかどうか。`true` の場合、子の選択肢の `disabled` プロパティは無視されます。
`error`	`any`	ユーザーにエラーを示します。すぐに解決する必要がある問題を伝えるため、フィールドに特定のスタイルが適用されます。
`label`	`any`	フィールドのラベルとして使用するコンテンツです。
`labelAccessibilityVisibility`	`"visible" \| "exclusive"`	コンポーネントのラベルの表示状態を変更します。 - `visible`: ラベルはすべてのユーザーに表示されます。 - `exclusive`: ラベルは視覚的に非表示になりますが、アクセシビリティツリーには残ります。
`multiple`	`boolean`	複数の選択肢を選択できるかどうか。
`name`	`string`	最も近い親のフォーム内で一意となる、フィールドの識別子です。
`values`	`string[]`	選択されたオプションの `value` の配列です。子オプションの `selected` prop を設定するための便利な prop です。

Events

Event	型
`change`	`Event`
`input`	`Event`

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

Slots

Slot	説明
`default`	ユーザーが選択できる選択肢です。choice コンポーネントを受け付けます。

SChoiceList <s-choice-list> ​

ベストプラクティス ​

例 ​

v-model ​

Props ​

Events ​

Slots ​