SNumberField <s-number-field>

最小値、最大値、ステップを指定できる数値入力。 SNumberField は、Shopify Polaris の <s-number-field> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

• 純粋な数値だけに使う。 数量、寸法、パーセンテージなどに使います。商品コードや電話番号のように、値に文字や記号が含まれうる場合は、代わりに STextField を使います。
• 単位を示す。 prefix または suffix で数値が何を表すのかを示し、ドル、キログラム、パーセンテージのどれを入力しているのかマーチャントが迷わないようにします。
• ビジネスルールに合った制限を設定する。 実際に許可される範囲を反映した min と max を設定し、フォームの送信前に有効な入力へとマーチャントを導きます。
• 検証し、エラーを説明する。 すべての数値入力をチェックし、問題があるときは、汎用的なメッセージを表示するのではなく、error で何が問題でどう直せばよいかを正確に伝えます。

<SNumberField label="Discount" suffix="%" :min="0" :max="100" />

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

例

Value: 1

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

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

<template>
  <SNumberField label="Quantity" :min="0" :max="100" :step="1" v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

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

<SNumberField v-model="value" />

これは次と同等です：

<SNumberField :value="value" @input="value = $event.target.value" />

Props

Prop	型	説明
autocomplete	"one-time-code" | "cc-number" | "cc-csc" | "on" | "off" | "shipping one-time-code" | "billing one-time-code" | "shipping cc-number" … (3 more)	フィールドに入力される内容のヒントです。on（デフォルト）に設定すると、フィールドがオートフィルをサポートすべきであることを示しますが、想定される内容についてそれ以上の意味的な情報はありません。off に設定すると、このフィールドに機密情報、またはワンタイムコードのように保存されることのない内容が含まれることを示します。あるいは、オートフィル時にこのフィールドに入力してほしい具体的なデータを表す値を指定することもできます。
defaultValue	string	フィールドのデフォルト値です。
details	any	フィールドのコンテキストやガイダンスを提供する追加のテキストです。このテキストはフィールドとそのラベルとともに表示され、ユーザーに詳しい情報や手順を伝えます。スクリーンリーダーのユーザーにも公開されます。
disabled	boolean	フィールドを無効にし、あらゆる操作を受け付けないようにします。
error	any	ユーザーにエラーを示します。すぐに解決する必要がある問題を伝えるため、フィールドに特定のスタイルが適用されます。
id	string	要素の一意な識別子です。
inputMode	"decimal" | "numeric"	モバイルデバイスで表示する仮想キーボードのタイプです。 - decimal: 小数点付きの数字キーボードを表示します。価格や寸法に適しています。 - numeric: 小数点なしの数字キーボードを表示します。数量などの整数に適しています。詳しくは inputmode 属性 を参照してください。
label	any	フィールドのラベルとして使用するコンテンツです。
labelAccessibilityVisibility	"visible" | "exclusive"	コンポーネントのラベルの表示状態を変更します。 - visible: ラベルはすべてのユーザーに表示されます。 - exclusive: ラベルは視覚的に非表示になりますが、アクセシビリティツリーには残ります。
max	number	フィールドで受け付ける最大の小数または整数です。step と併用すると、値は max の数値に切り下げられます。注意: ユーザーはキーボードを使って max より大きい数値を入力することもできます。適切なバリデーションを追加するのは開発者の責任です。
min	number	フィールドで受け付ける最小の小数または整数です。step と併用すると、値は min の数値に切り上げられます。注意: ユーザーはキーボードを使って min より小さい数値を入力することもできます。適切なバリデーションを追加するのは開発者の責任です。
name	string	最も近い親のフォーム内で一意となる、フィールドの識別子です。
placeholder	string	フィールドに期待される値を説明する短いヒントです。
prefix	string	フィールドの編集可能な部分の直前に表示される値です。"https://" や "+353" など、値の暗黙的な部分を表示するのに便利です。ユーザーは編集できず、フィールドの値にも含まれません。ユーザーが入力を操作するまで表示されない場合があります。たとえば、ユーザーが入力にフォーカスするまで、インラインラベルがプレフィックスの位置に表示されることがあります。
readOnly	boolean	ユーザーはフィールドを編集できません。フォーカスは可能で、スクリーンリーダーによって読み上げられます。
required	boolean	フィールドに値が必要かどうか。この要件はフィールドにセマンティックな意味を加えますが、エラーが自動的に表示されるわけではありません。このフィールドが空のときにエラーを表示したい場合は、error プロパティを使用してください。
step	number	値を増減できる量です。整数または小数を指定できます。step とともに max または min が指定されている場合、ボタンで値を増減すると、最終的な値は最も近い有効な値ではなく、常に max または min に丸められます。
suffix	string	フィールドの編集可能な部分の直後に表示される値です。"@shopify.com" や "%" など、値の暗黙的な部分を表示するのに便利です。ユーザーは編集できず、フィールドの値にも含まれません。ユーザーが入力を操作するまで表示されない場合があります。たとえば、ユーザーが入力にフォーカスするまで、インラインラベルがサフィックスの位置に表示されることがあります。
value	string

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

Events

Event	型
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

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

Slots

Slot	説明
details
error