SSelect `<s-select>`

リストから 1 つの選択肢を選ぶドロップダウン。 SSelect は、Shopify Polaris の <s-select> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

決まった選択肢のセットに使う。 セレクトは、マーチャントがあらかじめ定義されたリストから選ぶ場合に適しています。独自の値を入力する必要がある場合や、長いリストから探す必要がある場合は、入力に応じて候補を提示するテキストフィールドや、検索できるドロップダウンのほうが適しています。
選択肢の順序を意図的に決める。 関連する選択肢をグループ化し、よく使われるものを先頭に置き、自然な順序がない場合はアルファベット順に並べて、マーチャントがすばやく選択肢を見つけられるようにします。
ざっと見てわかるラベルを書く。 各選択肢に十分な文脈を持たせ、マーチャントがいくつも開いて読まなくても選択肢を区別できるようにします。
初期状態は意図して選ぶ。 明らかなデフォルトがある場合は選択肢をあらかじめ選択しておき、マーチャントに意識して選んでほしい場合は placeholder を使います。初期状態を曖昧なままにしないでください。
検証の問題を説明する。 選択が必須の場合や無効な場合は、error で何をすべきかを具体的に伝えます。状況に合わせたメッセージは、汎用的なものよりもマーチャントがフォームを早く完了する助けになります。

vue

<SSelect label="Shipping speed" placeholder="Choose a shipping speed" required>
  <SOption value="standard">Standard (5–7 business days)</SOption>
  <SOption value="express">Express (2–3 business days)</SOption>
  <SOption value="overnight">Overnight (next business day)</SOption>
</SSelect>

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

例

United States

Canada

France

Germany

Value: (none)

vue

<script setup>
import { ref } from 'vue'
import { SSelect, SOption, SOptionGroup } from 'polaris-vue-elements'

const value = ref('')
</script>

<template>
  <SSelect label="Shipping region" placeholder="Select a region" v-model="value">
    <SOptionGroup label="North America">
      <SOption value="us">United States</SOption>
      <SOption value="ca">Canada</SOption>
    </SOptionGroup>
    <SOptionGroup label="Europe">
      <SOption value="fr">France</SOption>
      <SOption value="de">Germany</SOption>
    </SOptionGroup>
  </SSelect>
  <p>Value: {{ value }}</p>
</template>

v-model

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

template

<SSelect v-model="value" />

これは次と同等です：

template

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

Props

Prop	型	説明
`details`	`any`	フィールドのコンテキストやガイダンスを提供する追加のテキストです。このテキストはフィールドとそのラベルとともに表示され、ユーザーに詳しい情報や手順を伝えます。スクリーンリーダーのユーザーにも公開されます。
`disabled`	`boolean`	フィールドを無効にし、あらゆる操作を受け付けないようにします。
`error`	`any`	ユーザーにエラーを示します。すぐに解決する必要がある問題を伝えるため、フィールドに特定のスタイルが適用されます。
`icon`	`"color" \| "info" \| "adjust" \| "affiliate" \| "airplane" \| "alert-bubble" \| "alert-circle" \| "alert-diamond" … (553 more)`	フィールドに表示するアイコンのタイプです。
`id`	`string`	要素の一意な識別子です。
`label`	`any`	フィールドのラベルとして使用するコンテンツです。
`labelAccessibilityVisibility`	`"visible" \| "exclusive"`	コンポーネントのラベルの表示状態を変更します。 - `visible`: ラベルはすべてのユーザーに表示されます。 - `exclusive`: ラベルは視覚的に非表示になりますが、アクセシビリティツリーには残ります。
`name`	`string`	最も近い親のフォーム内で一意となる、フィールドの識別子です。
`placeholder`	`string`	フィールドに期待される値を説明する短いヒントです。
`required`	`boolean`	フィールドに値が必要かどうか。この要件はフィールドにセマンティックな意味を加えますが、エラーが自動的に表示されるわけではありません。このフィールドが空のときにエラーを表示したい場合は、`error` プロパティを使用してください。
`value`	`string`

上記の一部の型の列は読みやすさのために省略されています。完全な union はライブラリが生成する TypeScript の型（src/lib/generated/types.ts）で確認できます。

Events

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

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

Slots

Slot	説明
`default`	ドロップダウンリストに表示される選択可能なオプションです。個々の選択可能な項目としてオプションコンポーネントを、関連するオプションをラベル付きの論理的なグループにまとめるためにオプショングループコンポーネントを受け付けます。
`details`
`error`

SSelect <s-select> ​

ベストプラクティス ​

例 ​

v-model ​

Props ​

Events ​

Slots ​