# Stripe Apps の TextArea コンポーネント

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

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/textarea?app-sdk-version=8.

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

```js
import {TextArea} from '@stripe/ui-extension-sdk/ui';
```

### TextArea プロパティ

| プロパティー           | タイプ                                                                                                                                                                 |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `autoComplete`   | (オプション)
  `string | undefined`

  オートコンプリート動作の 1 つを指定します。                                                                                                           |
| `autoFocus`      | (オプション)
  `boolean | undefined`

  `true` の場合、React はエレメントをマウントにフォーカスします。                                                                                           |
| `cols`           | (オプション)
  `number | undefined`                                                                                                                                      |
| `css`            | (オプション)
  `CSS | undefined`

  関連タイプ: [CSS](https://docs.stripe.com/stripe-apps/components/textarea.md#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` の場合、フォームを送信するには値を指定する必要があります。                                                                                             |
| `resizeable`     | (オプション)
  `boolean | undefined`                                                                                                                                     |
| `rows`           | (オプション)
  `number | undefined`                                                                                                                                      |
| `size`           | (オプション)
  `("small" | "medium" | "large") | undefined`

  コンポーネントのサイズ。                                                                                              |
| `spellCheck`     | (オプション)
  `boolean | "true" | "false" | undefined`

  `true` または `false` に明示的に設定すると、スペルチェックを有効または無効にします。                                                            |
| `tabIndex`       | (オプション)
  `number | undefined`

  Tab キーのデフォルト動作を上書きします。`-1` と `0` 以外の値は使用しないでください。                                                                                 |
| `value`          | (オプション)
  `string | undefined`

  入力のテキストを制御します。このプロパティを渡すときには、渡された値を更新する `onChange` ハンドラも渡す必要があります。                                                                |
| `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`

  コンポーネントの幅。詳細については、[サイズ指定](https://docs.stripe.com/stripe-apps/style.md#sizing)をご覧ください。 |

## 無効

エレメントで `invalid` プロパティを設定することにより、`TextArea` に無効のマークを付けることができます。これは純粋に視覚的なものです。デフォルトは `false` です。

## サイズ変更可能

デフォルトでは、`TextArea` は垂直方向のサイズ変更が可能です。この設定は通常、スペースを広げる必要がある場合に向いています。エレメントのサイズを変更できないようにする場合は、`resizeable` を `false` に設定します。

## サイズ

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

## 無効と読み取り専用

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

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

## 行

`TextArea` の高さは、従来のピクセル単位の高さではなく、通常の `<TextArea />` のように行数で制御されます。こうすると、行のピクセル値ではなく、フォントサイズの倍数に基づいて、エレメント自体のサイズを設定できます。これにより、デフォルトでテキストの一部が隠れることがなくなります。

`TextArea` コンポーネントの縦方向の高さは、設定するサイズ値によっても変わります。入力範囲のテキストの行の高さが変わるためです。

## ステータス管理

`TextArea` コンポーネントを[非制御の入力](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md#use-uncontrolled-components-for-interactions)として使用します。

## 幅

`css` プロパティと[使用可能な値](https://docs.stripe.com/stripe-apps/style.md#sizing)を使用して、`TexaArea` コンポーネントの幅を設定します。


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/textarea?app-sdk-version=9.

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

```js
import {TextArea} from '@stripe/ui-extension-sdk/ui';
```

### TextArea プロパティ

| プロパティー           | タイプ                                                                                                                                                                 |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `autoComplete`   | (オプション)
  `string | undefined`

  オートコンプリート動作の 1 つを指定します。                                                                                                           |
| `autoFocus`      | (オプション)
  `boolean | undefined`

  `true` の場合、React はエレメントをマウントにフォーカスします。                                                                                           |
| `cols`           | (オプション)
  `number | undefined`                                                                                                                                      |
| `css`            | (オプション)
  `CSS | undefined`

  関連タイプ: [CSS](https://docs.stripe.com/stripe-apps/components/textarea.md#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` の場合、フォームを送信するには値を指定する必要があります。                                                                                             |
| `resizeable`     | (オプション)
  `boolean | undefined`                                                                                                                                     |
| `rows`           | (オプション)
  `number | undefined`                                                                                                                                      |
| `size`           | (オプション)
  `("small" | "medium" | "large") | undefined`

  コンポーネントのサイズ。                                                                                              |
| `spellCheck`     | (オプション)
  `boolean | "true" | "false" | undefined`

  `true` または `false` に明示的に設定すると、スペルチェックを有効または無効にします。                                                            |
| `tabIndex`       | (オプション)
  `number | undefined`

  Tab キーのデフォルト動作を上書きします。`-1` と `0` 以外の値は使用しないでください。                                                                                 |
| `value`          | (オプション)
  `string | undefined`

  入力のテキストを制御します。このプロパティを渡すときには、渡された値を更新する `onChange` ハンドラも渡す必要があります。                                                                |
| `wrap`           | (オプション)
  `("soft" | "hard") | 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`

  コンポーネントの幅。詳細については、[サイズ指定](https://docs.stripe.com/stripe-apps/style.md#sizing)をご覧ください。 |

## 無効

エレメントで `invalid` プロパティを設定することにより、`TextArea` に無効のマークを付けることができます。これは純粋に視覚的なものです。デフォルトは `false` です。

## サイズ変更可能

デフォルトでは、`TextArea` は垂直方向のサイズ変更が可能です。この設定は通常、スペースを広げる必要がある場合に向いています。エレメントのサイズを変更できないようにする場合は、`resizeable` を `false` に設定します。

## サイズ

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

## 無効と読み取り専用

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

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

## 行

`TextArea` の高さは、従来のピクセル単位の高さではなく、通常の `<TextArea />` のように行数で制御されます。こうすると、行のピクセル値ではなく、フォントサイズの倍数に基づいて、エレメント自体のサイズを設定できます。これにより、デフォルトでテキストの一部が隠れることがなくなります。

`TextArea` コンポーネントの縦方向の高さは、設定するサイズ値によっても変わります。入力範囲のテキストの行の高さが変わるためです。

## ステータス管理

`TextArea` コンポーネントを[非制御の入力](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md#use-uncontrolled-components-for-interactions)として使用します。

## 幅

`css` プロパティと[使用可能な値](https://docs.stripe.com/stripe-apps/style.md#sizing)を使用して、`TexaArea` コンポーネントの幅を設定します。


## See also

- [従うべき設計パターン](https://docs.stripe.com/stripe-apps/patterns.md)
- [アプリのスタイル設定](https://docs.stripe.com/stripe-apps/style.md)
- [UI テスト](https://docs.stripe.com/stripe-apps/ui-testing.md)