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

TextField を使用して、テキスト入力フィールドを作成します。

# v8

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

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

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

### TextField のプロパティー

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

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

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

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

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

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

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

  入力のテキストに類似したタイプから選択します。                                            |
| `value`          | (オプション)
  `string | undefined`

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

## 無効

TextField エレメントに `invalid` を設定すると、コンポーネントをレンダリングし、指定された値が受け入れられないことを視覚的に示すために赤い輪郭線を表示できます。このプロパティを省略すると、デフォルトで `false` が設定されます。

## タイプ

TextField の `type` プロパティーを設定して、予期されるテキスト値のタイプに応じて異なる方法でレンダリングすることができます。これは、`<input />` のタイプ属性と似ていますが、テキストが許可されるタイプに制限されています。このプロパティーを省略すると、デフォルトで `text` になります。

## サイズ

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

## 無効と読み取り専用

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

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

## ステータス管理

`TextField` コンポーネントを[非制御の入力](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)を使用して、`TextField` コンポーネントの幅を設定します。


# v9

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

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

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

### TextField のプロパティー

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

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

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

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

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

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

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

  入力のテキストに類似したタイプから選択します。                                            |
| `value`          | (オプション)
  `string | undefined`

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

### 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)をご覧ください。 |

## 無効

TextField エレメントに `invalid` を設定すると、コンポーネントをレンダリングし、指定された値が受け入れられないことを視覚的に示すために赤い輪郭線を表示できます。このプロパティを省略すると、デフォルトで `false` が設定されます。

## タイプ

TextField の `type` プロパティーを設定して、予期されるテキスト値のタイプに応じて異なる方法でレンダリングすることができます。これは、`<input />` のタイプ属性と似ていますが、テキストが許可されるタイプに制限されています。このプロパティーを省略すると、デフォルトで `text` になります。

## サイズ

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

## 無効と読み取り専用

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

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

## ステータス管理

`TextField` コンポーネントを[非制御の入力](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)を使用して、`TextField` コンポーネントの幅を設定します。


## 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)