テキスト領域

TextArea を使用して、複数行テキストの入力フィールドを作成します。

SDK バージョン

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);
  }}
/>

TextArea props

プロパティー	タイプ
`autoComplete`	オプション `string \| undefined` Specifies one of the possible autocomplete behaviors.
`autoFocus`	オプション `boolean \| undefined` If `true`, React will focus the element on mount.
`cols`	オプション `number \| undefined`
`css`	オプション `Object` Related types: CSS.
`defaultValue`	オプション `string \| undefined` Specifies the initial value that a user can change.
`description`	オプション `string \| undefined` コントロールのラベルの横にレンダリングされる説明テキスト。
`disabled`	オプション `boolean \| undefined` 要素を無効化するかどうかを設定します。選択できなくなります。
`error`	オプション `string \| undefined` コントロールの下に表示されるエラーテキスト。
`form`	オプション `string \| undefined` Specifies the `id` of the `<form>` this input belongs to. If omitted, it’s the closest parent form.
`hiddenElements`	オプション `("label" \| "description" \| "error")[] \| undefined` 指定した要素を視覚的に非表示にします。非表示の要素は引き続き存在しており、スクリーンリーダーに表示されます。
`invalid`	オプション `boolean \| undefined` 要素が無効な状態であるかどうかを設定します。これは、表示専用のプロパティであり、フォーム送信を妨げるものではありません。
`label`	オプション `React.ReactNode` コントロールを説明するテキスト。表示され、クリック可能になります。
`maxLength`	オプション `number \| undefined` Specifies the maximum length of text.
`minLength`	オプション `number \| undefined` Specifies the minimum length of text.
`name`	オプション `string \| undefined` Specifies the name for this input that’s submitted with the form.
`onChange`	オプション `((event: React.ChangeEvent<HTMLInputElement>) => void) \| undefined` Required for controlled inputs. Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event.
`onKeyDown`	オプション `((event: React.KeyboardEvent<HTMLInputElement>) => void) \| undefined` Fires when a key is pressed.
`onKeyUp`	オプション `((event: React.KeyboardEvent<HTMLInputElement>) => void) \| undefined` Fires when a key is released.
`placeholder`	オプション `string \| undefined` Displayed in a dimmed color when the input value is empty.
`readOnly`	オプション `boolean \| undefined` If `true`, the input is not editable by the user.
`required`	オプション `boolean \| undefined` If `true`, the value must be provided for the form to submit.
`resizeable`	オプション `boolean \| undefined`
`rows`	オプション `number \| undefined`
`size`	オプション `("small" \| "medium" \| "large") \| undefined` コンポーネントのサイズ。
`spellCheck`	オプション `boolean \| "true" \| "false" \| undefined` If explicitly set to `true` or `false`, enables or disables spellchecking.
`tabIndex`	オプション `number \| undefined` Overrides the default Tab button behavior. Avoid using values other than `-1` and `0`.
`value`	オプション `string \| undefined` Controls the input’s text. When you pass this prop, you must also pass an `onChange` handler that updates the passed value.
`wrap`	オプション `string \| undefined`
`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` The width of the component. See Sizing for details.

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

The width of the component. See Sizing for details.

無効

エレメントで 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…" />

ステータス管理

Use the TextArea component as an uncontrolled input:

<TextArea
  onChange={(e) => {
    console.log(e);
  }}
  label="About your business"
  placeholder="Our business is…"
/>

幅

Set the width of a TexaArea component using the available values with the css prop:

<TextArea
  label="App feedback"
  defaultValue="Stripe Apps lets you embed custom…"
  css={{width: 'fill'}}
/>