テキストフィールド
TextField を使用して、テキスト入力フィールドを作成します。
TextField
コンポーネントをアプリに追加するには、以下のようにします。
import {TextField} from '@stripe/ui-extension-sdk/ui';
<TextField label="Business name" placeholder="Acme Inc…" onChange={(e) => { console.log(e.target.value); }} />
Props
Prop | Type | Description |
---|---|---|
aria-label |
| Text that describes the control. Only visible to screen readers, and is not clickable. Should not be used if `label` is set. |
autoComplete |
| |
autoFocus |
| |
defaultValue |
| |
description |
| Descriptive text that will be rendered adjacent to the control's label. |
disabled |
| |
error |
| Error text that will be rendered below the control. |
form |
| |
hiddenElements |
| Visually hides the specified elements. The hidden elements will still be present and visible to screen readers. |
invalid |
| Programmatically mark the value as invalid |
label |
| Text that describes the control. Will be both visible and clickable. |
maxLength |
| |
minLength |
| |
name |
| |
onChange |
| |
onKeyDown |
| |
onKeyUp |
| |
placeholder |
| |
readOnly |
| |
required |
| |
size |
| The size of the input |
spellCheck |
| |
tabIndex |
| |
type |
| Choose between the text-alike types on an input |
onKeyPress Deprecated |
|
CSS
TextField
コンポーネントは、以下の CSS プロパティをサポートします。
プロパティ | タイプ | 例 |
width | 2/3 | |
フィールドの幅。詳細については、サイズ指定をご覧ください。 |
TextField
コンポーネントは、その他の CSS をサポートしていません。代わりにプロパティを使用してスタイルを設定してください。
無効
エレメントの invalid
プロパティーを設定することにより、TextField
コンポーネントに無効のマークを付けることができます。これは単に視覚的な効果です。デフォルトは false
です。
<TextField label="Current year" defaultValue="1892" invalid />
タイプ
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 css={{width: 'fill'}} />