STextField `<s-text-field>`

ラベル、プレースホルダー、バリデーションエラー、ヘルプテキストを備えた 1 行のテキスト入力。 STextField は、Shopify Polaris の <s-text-field> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

期待される入力をわかりやすくする。 何をどの形式で入力すればよいかをマーチャントに伝える label と placeholder を書きます。曖昧な文言は、推測、検証エラー、ストレスにつながります。
プレフィックスやサフィックスで文脈を加える。 prefix と suffix を使って、URL 全体を入力するのかサブドメインだけなのか、価格全体なのか金額だけなのかなど、値の種類と形式を示します。
制約は実際の要件に基づける。 minLength、maxLength、検証ルールは、任意の数値ではなく実際のビジネス上の必要性に応じて設定し、その内容をマーチャントに伝えます。
早めに、具体的なフィードバックを返す。 送信時だけでなく入力中にも、入力が有効かどうかをマーチャントに知らせます。無効な場合は、error で何が問題でどう直せばよいかを説明します。

vue

<STextField label="Store address" prefix="https://" suffix=".myshopify.com" />

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

例

Value: (empty)

vue

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

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

<template>
  <STextField label="Your name" placeholder="Jane Doe" v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

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

template

<STextField v-model="value" />

これは次と同等です：

template

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

Props

Prop	型	説明
`autocomplete`	`"language" \| "organization" \| "name" \| "additional-name" \| "address-level1" \| "address-level2" \| "address-level3" \| "address-level4" … (84 more)`	フィールドに入力される内容のヒントです。`on`（デフォルト）に設定すると、フィールドがオートフィルをサポートすべきであることを示しますが、想定される内容についてそれ以上の意味的な情報はありません。`off` に設定すると、このフィールドに機密情報、またはワンタイムコードのように保存されることのない内容が含まれることを示します。あるいは、オートフィル時にこのフィールドに入力してほしい具体的なデータを表す値を指定することもできます。
`defaultValue`	`string`	フィールドのデフォルト値です。
`details`	`any`	フィールドのコンテキストやガイダンスを提供する追加のテキストです。このテキストはフィールドとそのラベルとともに表示され、ユーザーに詳しい情報や手順を伝えます。スクリーンリーダーのユーザーにも公開されます。
`disabled`	`boolean`	フィールドを無効にし、あらゆる操作を受け付けないようにします。
`error`	`any`	ユーザーにエラーを示します。すぐに解決する必要がある問題を伝えるため、フィールドに特定のスタイルが適用されます。
`icon`	`"cart-filled" \| "channels-filled" \| "home-filled" \| "order-filled" \| "person-filled" \| "product-filled" \| "color" \| "info" … (597 more)`	フィールドに表示するアイコンのタイプです。
`id`	`string`	要素の一意な識別子です。
`label`	`any`	フィールドのラベルとして使用するコンテンツです。
`labelAccessibilityVisibility`	`"visible" \| "exclusive"`	コンポーネントのラベルの表示状態を変更します。 - `visible`: ラベルはすべてのユーザーに表示されます。 - `exclusive`: ラベルは視覚的に非表示になりますが、アクセシビリティツリーには残ります。
`maxLength`	`number`	入力できる最大文字数を指定します。
`minLength`	`number`	入力できる最小文字数を指定します。
`name`	`string`	最も近い親のフォーム内で一意となる、フィールドの識別子です。
`placeholder`	`string`	フィールドに期待される値を説明する短いヒントです。
`prefix`	`string`	フィールドの編集可能な部分の直前に表示される値です。"https://" や "+353" など、値の暗黙的な部分を表示するのに便利です。ユーザーは編集できず、フィールドの値にも含まれません。ユーザーが入力を操作するまで表示されない場合があります。たとえば、ユーザーが入力にフォーカスするまで、インラインラベルがプレフィックスの位置に表示されることがあります。
`readOnly`	`boolean`	ユーザーはフィールドを編集できません。フォーカスは可能で、スクリーンリーダーによって読み上げられます。
`required`	`boolean`	フィールドに値が必要かどうか。この要件はフィールドにセマンティックな意味を加えますが、エラーが自動的に表示されるわけではありません。このフィールドが空のときにエラーを表示したい場合は、`error` プロパティを使用してください。
`suffix`	`string`	フィールドの編集可能な部分の直後に表示される値です。"@shopify.com" や "%" など、値の暗黙的な部分を表示するのに便利です。ユーザーは編集できず、フィールドの値にも含まれません。ユーザーが入力を操作するまで表示されない場合があります。たとえば、ユーザーが入力にフォーカスするまで、インラインラベルがサフィックスの位置に表示されることがあります。
`value`	`string`	フィールドの現在の値です。省略した場合、フィールドは空になります。

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

Events

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

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

Slots

Slot	説明
`accessory`	テキストフィールドの横に表示される追加のコンテンツで、通常はヘルプツールチップを開いたりモーダルを起動したりするなど、関連する機能を提供するアイコンやボタンです。
`details`
`error`

STextField <s-text-field> ​

ベストプラクティス ​

例 ​

v-model ​

Props ​

Events ​

Slots ​