Stripe Apps の TextField コンポーネント
TextField を使用して、テキスト入力フィールドを作成します。
TextField
コンポーネントをアプリに追加するには、以下のようにします。
import {TextField} from '@stripe/ui-extension-sdk/ui';
<TextField label="Business name" placeholder="Acme Inc…" onChange={(e) => { console.log(e.target.value); }} />
TextField のプロパティー
プロパティー | タイプ |
---|---|
| オプション
オートコンプリート動作の 1 つを指定します。 |
| オプション
|
| オプション
関連タイプ: CSS。 |
| オプション
ユーザーが変更できる初期値を指定します。 |
| オプション
コントロールのラベルの横にレンダリングされる説明テキスト。 |
| オプション
要素を無効化するかどうかを設定します。選択できなくなります。 |
| オプション
コントロールの下に表示されるエラーテキスト。 |
| オプション
この入力が属する |
| オプション
指定した要素を視覚的に非表示にします。非表示の要素は引き続き存在しており、スクリーンリーダーに表示されます。 |
| オプション
要素が無効な状態であるかどうかを設定します。これは、表示専用のプロパティであり、フォーム送信を妨げるものではありません。 |
| オプション
コントロールを説明するテキスト。表示され、クリック可能になります。 |
| オプション
テキストの最大長を指定します。 |
| オプション
テキストの最小長を指定します。 |
| オプション
フォームと共に送信されるこの入力の名前を指定します。 |
| オプション
制御入力に必須です。入力の値をユーザーが変更するとすぐに発生します (たとえば、キーストロークのたびに起動されます)。ブラウザーの入力イベントのように動作します。 |
| オプション
キーが押されると起動します。 |
| オプション
キーを離すと起動します。 |
| オプション
入力値が空の場合は淡色で表示されます。 |
| オプション
|
| オプション
|
| オプション
コンポーネントのサイズ。 |
| オプション
|
| オプション
Tab キーのデフォルト動作を上書きします。 |
| オプション
入力のテキストに類似したタイプから選択します。 |
| オプション
入力のテキストを制御します。このプロパティを渡すときには、渡された値を更新する |
| オプション非推奨
|
CSS
プロパティー | タイプ |
---|---|
| オプション
コンポーネントの幅。詳細については、サイズ指定をご覧ください。 |
無効
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'}} />