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

チェックボックスを使用して、boolean 値の指定または制御を行います。

# v8

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

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

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

`Checkbox` は、適切なすべての[ネイティブ DOM 属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox)のほかに、以下のプロパティーを受け入れます。

### Checkbox のプロパティ

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

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

  入力を選択するかどうかを制御します。このプロパティを渡すときには、渡された値を更新する `onChange` ハンドラも渡す必要があります。                                                                                                                             |
| `defaultChecked` | (オプション)
  `boolean | undefined`

  ユーザーが変更できる初期値を指定します。                                                                                                                                                                               |
| `description`    | (オプション)
  `string | undefined`

  コントロールのラベルの横にレンダリングされる説明テキスト。                                                                                                                                                                       |
| `disabled`       | (オプション)
  `boolean | undefined`

  要素を無効化するかどうかを設定します。選択できなくなります。                                                                                                                                                                     |
| `error`          | (オプション)
  `string | undefined`

  コントロールの下に表示されるエラーテキスト。                                                                                                                                                                              |
| `form`           | (オプション)
  `string | undefined`

  この入力が属する `<form>` の `id` を指定します。省略すると、最も近い親フォームになります。                                                                                                                                               |
| `hiddenElements` | (オプション)
  `("label" | "description" | "error")[] | undefined`

  指定した要素を視覚的に非表示にします。非表示の要素は引き続き存在しており、スクリーンリーダーに表示されます。                                                                                                               |
| `indeterminate`  | (オプション)
  `boolean | undefined`

  `Checkbox` を不確定 (「部分的にチェックされている」) としてレンダリングするかどうかを設定します。これは単に視覚的な効果であり、`Checkbox` の実際の `checked` 状態を変更するものではありません。`Checkbox` が `indeterminate` と `checked` の両方の状態である場合は、`indeterminate` として表示されます。 |
| `invalid`        | (オプション)
  `boolean | undefined`

  要素が無効な状態であるかどうかを設定します。これは、表示専用のプロパティであり、フォーム送信を妨げるものではありません。                                                                                                                                       |
| `label`          | (オプション)
  `React.ReactNode`

  コントロールを説明するテキスト。表示され、クリック可能になります。                                                                                                                                                                      |
| `name`           | (オプション)
  `string | undefined`

  フォームと共に送信されるこの入力の名前を指定します。                                                                                                                                                                          |
| `onChange`       | (オプション)
  `((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined`

  制御入力に必須です。入力の値をユーザーが変更するとすぐに発生します (たとえば、キーストロークのたびに起動されます)。ブラウザーの入力イベントのように動作します。                                                                   |
| `readOnly`       | (オプション)
  `boolean | undefined`

  `true` の場合、ユーザーは入力を編集できません。                                                                                                                                                                        |
| `required`       | (オプション)
  `boolean | undefined`

  `true` の場合、フォームを送信するには値を指定する必要があります。                                                                                                                                                               |
| `tabIndex`       | (オプション)
  `number | undefined`

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

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

`Checkbox` コンポーネントを別のステータスに設定できます。

- `indeterminate`
- `disabled`
- `invalid`

## 不確定

`Checkbox` コンポーネントは、`indeterminate` 状態にすることができます。これは、checked とそうでないものが含まれる可能性がある他のチェックボックスのセットの集約状態を表す場合に利用できます。このプロパティは純粋に視覚的なものであり、Checkbox の基になる checked 状態に影響を与えないことに注意してください。

## 無効化

`Checkbox` は `disabled` に設定できます。こうすると、変更できなくなります。

## 無効

`Checkbox` コンポーネントに `invalid` のマークを付けることができます。これはスタイリング専用のプロパティであり、フォームの検証に役立ちます。フォームの送信が妨げられることはありません。

## ステータス管理

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


# v9

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

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

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

`Checkbox` は、適切なすべての[ネイティブ DOM 属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox)のほかに、以下のプロパティーを受け入れます。

### Checkbox のプロパティ

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

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

  入力を選択するかどうかを制御します。このプロパティを渡すときには、渡された値を更新する `onChange` ハンドラも渡す必要があります。                                                                                                                             |
| `defaultChecked` | (オプション)
  `boolean | undefined`

  ユーザーが変更できる初期値を指定します。                                                                                                                                                                               |
| `description`    | (オプション)
  `string | undefined`

  コントロールのラベルの横にレンダリングされる説明テキスト。                                                                                                                                                                       |
| `disabled`       | (オプション)
  `boolean | undefined`

  要素を無効化するかどうかを設定します。選択できなくなります。                                                                                                                                                                     |
| `error`          | (オプション)
  `string | undefined`

  コントロールの下に表示されるエラーテキスト。                                                                                                                                                                              |
| `form`           | (オプション)
  `string | undefined`

  この入力が属する `<form>` の `id` を指定します。省略すると、最も近い親フォームになります。                                                                                                                                               |
| `hiddenElements` | (オプション)
  `("label" | "description" | "error")[] | undefined`

  指定した要素を視覚的に非表示にします。非表示の要素は引き続き存在しており、スクリーンリーダーに表示されます。                                                                                                               |
| `indeterminate`  | (オプション)
  `boolean | undefined`

  `Checkbox` を不確定 (「部分的にチェックされている」) としてレンダリングするかどうかを設定します。これは単に視覚的な効果であり、`Checkbox` の実際の `checked` 状態を変更するものではありません。`Checkbox` が `indeterminate` と `checked` の両方の状態である場合は、`indeterminate` として表示されます。 |
| `invalid`        | (オプション)
  `boolean | undefined`

  要素が無効な状態であるかどうかを設定します。これは、表示専用のプロパティであり、フォーム送信を妨げるものではありません。                                                                                                                                       |
| `label`          | (オプション)
  `React.ReactNode`

  コントロールを説明するテキスト。表示され、クリック可能になります。                                                                                                                                                                      |
| `name`           | (オプション)
  `string | undefined`

  フォームと共に送信されるこの入力の名前を指定します。                                                                                                                                                                          |
| `onChange`       | (オプション)
  `((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined`

  制御入力に必須です。入力の値をユーザーが変更するとすぐに発生します (たとえば、キーストロークのたびに起動されます)。ブラウザーの入力イベントのように動作します。                                                                   |
| `readOnly`       | (オプション)
  `boolean | undefined`

  `true` の場合、ユーザーは入力を編集できません。                                                                                                                                                                        |
| `required`       | (オプション)
  `boolean | undefined`

  `true` の場合、フォームを送信するには値を指定する必要があります。                                                                                                                                                               |
| `tabIndex`       | (オプション)
  `number | undefined`

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

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

`Checkbox` コンポーネントを別のステータスに設定できます。

- `indeterminate`
- `disabled`
- `invalid`

## 不確定

`Checkbox` コンポーネントは、`indeterminate` 状態にすることができます。これは、checked とそうでないものが含まれる可能性がある他のチェックボックスのセットの集約状態を表す場合に利用できます。このプロパティは純粋に視覚的なものであり、Checkbox の基になる checked 状態に影響を与えないことに注意してください。

## 無効化

`Checkbox` は `disabled` に設定できます。こうすると、変更できなくなります。

## 無効

`Checkbox` コンポーネントに `invalid` のマークを付けることができます。これはスタイリング専用のプロパティであり、フォームの検証に役立ちます。フォームの送信が妨げられることはありません。

## ステータス管理

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


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