Stripe Apps の TextField コンポーネント

TextField を使用して、テキスト入力フィールドを作成します。

SDK バージョン

TextField コンポーネントをアプリに追加するには、以下のようにします。

import {TextField} from '@stripe/ui-extension-sdk/ui';

サンプルを読み込み中...

<TextField
  label="Business name"
  placeholder="Acme Inc…"
  onChange={(e) => {
    console.log(e.target.value);
  }}
/>

TextField のプロパティー

プロパティー	タイプ
`autoComplete`	オプション `string \| undefined` オートコンプリート動作の 1 つを指定します。
`autoFocus`	オプション `boolean \| undefined` `true` の場合、React はエレメントをマウントにフォーカスします。
`css`	オプション `CSS \| undefined` 関連タイプ: CSS。
`defaultValue`	オプション `string \| undefined` ユーザーが変更できる初期値を指定します。
`description`	オプション `string \| undefined` コントロールのラベルの横にレンダリングされる説明テキスト。
`disabled`	オプション `boolean \| undefined` 要素を無効化するかどうかを設定します。選択できなくなります。
`error`	オプション `string \| undefined` コントロールの下に表示されるエラーテキスト。
`form`	オプション `string \| undefined` この入力が属する `<form>` の `id` を指定します。省略すると、最も近い親フォームになります。
`hiddenElements`	オプション `("label" \| "description" \| "error")[] \| undefined` 指定した要素を視覚的に非表示にします。非表示の要素は引き続き存在しており、スクリーンリーダーに表示されます。
`invalid`	オプション `boolean \| undefined` 要素が無効な状態であるかどうかを設定します。これは、表示専用のプロパティであり、フォーム送信を妨げるものではありません。
`label`	オプション `React.ReactNode` コントロールを説明するテキスト。表示され、クリック可能になります。
`maxLength`	オプション `number \| undefined` テキストの最大長を指定します。
`minLength`	オプション `number \| undefined` テキストの最小長を指定します。
`name`	オプション `string \| undefined` フォームと共に送信されるこの入力の名前を指定します。
`onChange`	オプション `((event: React.ChangeEvent<HTMLInputElement>) => void) \| undefined` 制御入力に必須です。入力の値をユーザーが変更するとすぐに発生します (たとえば、キーストロークのたびに起動されます)。ブラウザーの入力イベントのように動作します。
`onKeyDown`	オプション `((event: React.KeyboardEvent<HTMLInputElement>) => void) \| undefined` キーが押されると起動します。
`onKeyUp`	オプション `((event: React.KeyboardEvent<HTMLInputElement>) => void) \| undefined` キーを離すと起動します。
`placeholder`	オプション `string \| undefined` 入力値が空の場合は淡色で表示されます。
`readOnly`	オプション `boolean \| undefined` `true` の場合、ユーザーは入力を編集できません。
`required`	オプション `boolean \| undefined` `true` の場合、フォームを送信するには値を指定する必要があります。
`size`	オプション `("small" \| "medium" \| "large") \| undefined` コンポーネントのサイズ。
`spellCheck`	オプション `boolean \| "true" \| "false" \| undefined` `true` または `false` に明示的に設定すると、スペルチェックを有効または無効にします。
`tabIndex`	オプション `number \| undefined` Tab キーのデフォルト動作を上書きします。`-1` と `0` 以外の値は使用しないでください。
`type`	オプション `("number" \| "text" \| "search" \| "tel" \| "url" \| "email" \| "password") \| undefined` 入力のテキストに類似したタイプから選択します。
`value`	オプション `string \| undefined` 入力のテキストを制御します。このプロパティを渡すときには、渡された値を更新する `onChange` ハンドラも渡す必要があります。
`onKeyPress`	オプション非推奨 `((event: React.KeyboardEvent<HTMLInputElement>) => void) \| undefined`

CSS

プロパティータイプ

プロパティー	タイプ
`width`	オプション `(number \| "auto" \| "fill" \| "min" \| "max" \| "fit" \| "1/2" \| "1/3" \| "2/3" \| "1/4" \| "2/4" \| "3/4" \| "1/5" \| "2/5" \| "3/5" \| "4/5" \| "1/6" \| "2/6" \| "3/6" \| "4/6" \| "5/6" \| "1/12" \| "2/12" \| "3/12" \| "4/12" \| "5/12" \| "6/12" \| "7/12" \| "8/12" \| "9/12" \| "10/12" \| "11/12") \| undefined` コンポーネントの幅。詳細については、サイズ指定をご覧ください。

width

オプション

(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined

コンポーネントの幅。詳細については、サイズ指定をご覧ください。

無効

TextField エレメントに invalid を設定すると、コンポーネントをレンダリングし、指定された値が受け入れられないことを視覚的に示すために赤い輪郭線を表示できます。このプロパティを省略すると、デフォルトで false が設定されます。

サンプルを読み込み中...

<TextField label="Current year" defaultValue="1892" invalid />

タイプ

TextField の type プロパティーを設定して、予期されるテキスト値のタイプに応じて異なる方法でレンダリングすることができます。これは、<input /> のタイプ属性と似ていますが、テキストが許可されるタイプに制限されています。このプロパティーを省略すると、デフォルトで text になります。

サンプルを読み込み中...

<TextField label="Text" type="text" />
<TextField label="Password" type="password" />
<TextField label="Search" type="search" />
<TextField label="Number" type="number" />

サイズ

size を変更すると、デフォルト値より少し大きい、または少し小さいサイズを選択できます。一般に、同一のフォーム内で異なるサイズを組み合わせることはお勧めしません。デフォルト値は medium です。

サンプルを読み込み中...

<TextField label="Small" size="small" />
<TextField label="Medium" size="medium" />
<TextField label="Large" size="large" />

無効と読み取り専用

フィールドに disabled (無効) のマークを付けることができます。これにより、そのフィールドが使われなくなり、デザインが変わります。無効にすると、フォームの送信時にそのフォームエレメントのデータが送信されなくなります。

フィールドを readOnly (読み取り専用) にすることもできます。読み取り専用の場合、エレメント内のデータは送信されますが、ユーザーはそのデータを変更できません。

サンプルを読み込み中...

<TextField label="Disabled" defaultValue="Field is disabled" disabled />
<TextField label="Readonly" defaultValue="Field is readonly" readOnly />

ステータス管理

TextField コンポーネントを非制御の入力として使用します。

サンプルを読み込み中...

<TextField
  onChange={(e) => {
    console.log(e);
  }}
  label="First name"
/>

幅

css プロパティと使用可能な値を使用して、TextField コンポーネントの幅を設定します。

サンプルを読み込み中...

<TextField label="Search" type="search" css={{width: 'fill'}} />

Stripe Apps の TextField コンポーネント

TextField を使用して、テキスト入力フィールドを作成します。

TextField のプロパティー

CSS

無効

タイプ

サイズ

無効と読み取り専用

ステータス管理

幅

参照情報