SChoice <s-choice>

選択リスト内の 1 つの選択肢。 SChoice は、Shopify Polaris の <s-choice> web component 向けの型付き 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	型	説明
accessibilityLabel	string	スクリーンリーダーなどの支援技術を使用するユーザー向けのラベルです。設定すると、子要素や指定した label は読み上げられなくなります。視覚的なラベルなしでコントロールを表示しつつ、スクリーンリーダーを使用するユーザーにはコンテキストを提供する用途にも使用できます。
defaultSelected	boolean	コントロールがデフォルトでアクティブかどうか。
disabled	boolean	コントロールを無効にし、あらゆる操作を受け付けないようにします。
selected	boolean	コントロールがアクティブかどうか。
value	string	コントロールがチェックされたときにフォームデータで使用される値です。

Slots

Slot	説明
default	この選択可能な選択肢をユーザーに識別させるラベルです。ラベルは、指定されたコンテンツからテキストノードを抽出して連結することで生成され、マークアップや要素の構造は無視されます。
details	入力のコンテキストやガイダンスを提供する追加のテキストです。このテキストは入力とそのラベルとともに表示され、ユーザーに詳しい情報や手順を伝えます。
secondary-content	選択肢のラベルの下に表示する追加のコンテンツです。TextField、Button、その他のインタラクティブなコンポーネントなど、リッチなコンテンツを含めることができます。React コンポーネントのイベントハンドラーは保持されます。