テキスト領域
TextArea
コンポーネントをアプリに追加するには、以下のようにします。
import {TextArea} from '@stripe/ui-extension-sdk/ui';
<TextArea label="Description" placeholder="Acme Inc was founded in…" defaultValue="Stripe Apps lets you embed custom…" 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 |
| |
cols |
| |
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 |
| |
resizeable |
| Allow the user to resize the textarea |
rows |
| Rows of text that are visible in the input |
size |
| The size of the input |
spellCheck |
| |
tabIndex |
| |
wrap |
| |
onKeyPress Deprecated |
|
CSS
TextArea
コンポーネントは、以下の CSS プロパティをサポートします。
プロパティ | タイプ | 例 |
width | 2/3 | |
テキスト領域の幅。詳細については、サイズ指定をご覧ください。 |
TextArea
コンポーネントは、その他の CSS をサポートしていません。代わりにプロパティを使用してスタイルを設定してください。
無効
エレメントで invalid
プロパティを設定することにより、TextArea
に無効のマークを付けることができます。これは純粋に視覚的なものです。デフォルトは false
です。
<TextArea label="Favorite word" defaultValue="Stripe Apps lets you embed custom…" invalid />
サイズ変更可能
デフォルトでは、TextArea
は垂直方向のサイズ変更が可能です。この設定は通常、スペースを広げる必要がある場合に向いています。エレメントのサイズを変更できないようにする場合は、resizeable
を false
に設定します。
<TextArea label="Resizable bio" defaultValue="Stripe Apps lets you embed custom…" /> <TextArea label="Unresizable bio" resizeable={false} defaultValue="Stripe Apps lets you embed custom…" />
サイズ
size
を変更すると、デフォルト値より少し大きい、または少し小さいサイズを選択できます。一般に、同一のフォーム内で異なるサイズを組み合わせることはお勧めしません。デフォルト値は medium
です。
<TextArea label="Description (large)" size="large" defaultValue="Stripe Apps lets you embed custom…" /> <TextArea label="Description (medium, default)" size="medium" defaultValue="Stripe Apps lets you embed custom…" /> <TextArea label="Description (small)" size="small" defaultValue="Stripe Apps lets you embed custom…" />
無効と読み取り専用
フィールドに disabled
(無効) のマークを付けることができます。これにより、そのフィールドが使われなくなり、デザインが変わります。無効にすると、フォームの送信時にそのフォームエレメントのデータが送信されなくなります。
フィールドを readOnly
(読み取り専用) にすることもできます。読み取り専用の場合、エレメント内のデータは送信されますが、ユーザーはそのデータを変更できません。
<TextArea label="Disabled" defaultValue="Stripe Apps lets you embed custom…" disabled /> <TextArea label="Readonly" defaultValue="Stripe Apps lets you embed custom…" readOnly />
行
TextArea
の高さは、従来のピクセル単位の高さではなく、通常の <TextArea />
のように行数で制御されます。こうすると、行のピクセル値ではなく、フォントサイズの倍数に基づいて、エレメント自体のサイズを設定できます。これにより、デフォルトでテキストの一部が隠れることがなくなります。
TextArea
コンポーネントの縦方向の高さは、設定するサイズ値によっても変わります。入力範囲のテキストの行の高さが変わるためです。
<TextArea label="Description (3 rows, default)" defaultValue="Stripe Apps lets you embed custom…" /> <TextArea label="Description (6 rows)" rows={6} defaultValue="Stripe Apps lets you embed custom…" />
ステータス管理
TextArea
コンポーネントを非制御の入力として使用します。
<TextArea onChange={(e) => { console.log(e); }} label="About your business" placeholder="Our business is…" />
幅
css
プロパティーと使用可能な値を使用して、TexaArea
コンポーネントの幅を設定します。
<TextArea css={{width: 'fill'}} />