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

Select を使用して、ドロップダウンのオプションセットから選択します。

# v8

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

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

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

### Select プロパティ

| プロパティー           | タイプ                                                                                                                                                                  |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`       | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。                                                                                                                           |
| `autoComplete`   | (オプション)
  `string | undefined`

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

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

  関連タイプ: [CSS](https://docs.stripe.com/stripe-apps/components/select.md#css)。                                                           |
| `defaultValue`   | (オプション)
  `(string | string[]) | undefined`

  文字列 (または `multiple={true}` の場合は文字列の配列)。ユーザーが変更できる最初の選択オプションを指定します。                                                    |
| `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`

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

  `true` の場合、ブラウザは複数選択を許可します。                                                                                                       |
| `name`           | (オプション)
  `string | undefined`

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

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

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

  コンポーネントのサイズ。                                                                                               |
| `value`          | (オプション)
  `(string | string[]) | undefined`

  文字列 (または `multiple={true}` の場合は文字列の配列)。選択するオプションを制御します。                                                               |

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

## ステータス管理

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

## 無効化

`Select` コンポーネントは無効化でき、これにより変更できなくなります。

## 幅

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


# v9

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

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

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

### Select プロパティ

| プロパティー           | タイプ                                                                                                                                                                  |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`       | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。                                                                                                                           |
| `autoComplete`   | (オプション)
  `string | undefined`

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

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

  関連タイプ: [CSS](https://docs.stripe.com/stripe-apps/components/select.md#css)。                                                           |
| `defaultValue`   | (オプション)
  `(string | string[]) | undefined`

  文字列 (または `multiple={true}` の場合は文字列の配列)。ユーザーが変更できる最初の選択オプションを指定します。                                                    |
| `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`

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

  `true` の場合、ブラウザは複数選択を許可します。                                                                                                       |
| `name`           | (オプション)
  `string | undefined`

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

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

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

  コンポーネントのサイズ。                                                                                               |
| `value`          | (オプション)
  `(string | string[]) | undefined`

  文字列 (または `multiple={true}` の場合は文字列の配列)。選択するオプションを制御します。                                                               |

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

## ステータス管理

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

## 無効化

`Select` コンポーネントは無効化でき、これにより変更できなくなります。

## 幅

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


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