コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
AI に質問する
アカウントを作成
サインイン
始める
支払い
売上
プラットフォームおよびマーケットプレイス
資金管理
開発者向けリソース
概要
バージョン管理
変更ログ
API バージョンのアップグレード
SDK バージョンをアップグレードする
Essentials
SDK
API
テスト
Stripe CLI
ツール
ワークベンチ
開発者ダッシュボード
Stripe Shell
Visual Studio Code をご利用の場合
機能
ワークフロー
イベントの送信先
Stripe 健全性アラートファイルのアップロード
AI solutions
エージェントツールキット
Build with an LLM
セキュリティとプライバシー
セキュリティ
プライバシー
Stripe を拡張する
Stripe Apps
    概要
    始める
    アプリを作成する
    Stripe アプリの仕組み
    サンプルアプリ
    アプリを構築する
    シークレットを保存
    API 認証方法
    認証フロー
    サーバー側のロジック
    イベントのリッスン
    さまざまな環境を処理
    サンドボックスのサポートを有効にする
    アプリの設定ページ
    UI を構築する
    アカウント登録
    アプリを配布する
    配布オプション
    アプリをアップロード
    バージョンとリリース
    アプリをテストする
    アプリを公開する
    自分のアプリを宣伝する
    ディープリンクを追加する
    インストールリンクを作成
    UI 拡張機能で役割を割り当て
    インストール後のアクション
    アプリのアナリティクス
    Embedded components
    サードパーティーの Stripe アプリを埋め込む
    Stripe Apps に移行
    拡張機能を移行または構築
    Stripe Apps または Stripe Connect にプラグインを移行
    参照情報
    アプリマニフェスト
    CLI
    拡張 SDK
    権限
    ビューポート
    設計パターン
    コンポーネント
      アコーディオン
      バッジ
      バナー
      BarChart
      ボックス
      ボタン
      ButtonGroup
      チェックボックス
      チップ
      ContextView
      DateField
      ディバイダー
      FocusView
      FormFieldGroup
      アイコン
      Img
      インライン
      LineChart
      Link
      リスト
      メニュー
      PropertyList
      ラジオ
      選択してください
      SettingsView
      SignInView
      Sparkline
      スピナー
      切り替える
      テーブル
      タブ
      タスクリスト
      テキスト領域
      テキストフィールド
      トースト
      ツールチップ
Stripe のコネクター
パートナー
Partner Ecosystem
パートナー認定
ホーム開発者向けリソースStripe AppsComponents

Stripe Apps の Select コンポーネント

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

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

import {Select} from '@stripe/ui-extension-sdk/ui';
サンプルを読み込み中...
<Select name="demo-001" label="Choose a pet" onChange={(e) => { console.log(e); }} > <option value="">Choose an option</option> <option value="dogs">Dogs</option> <option value="cats">Cats</option> </Select>

Select プロパティ

プロパティータイプ

children

必須

React.ReactNode

コンポーネントのコンテンツ。

autoComplete

オプション

string | undefined

オートコンプリート動作の 1 つを指定します。

autoFocus

オプション

boolean | undefined

true の場合、React はエレメントをマウントにフォーカスします。

css

オプション

CSS | undefined

関連タイプ: 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

コンポーネントの幅。詳細については、サイズ指定をご覧ください。

ステータス管理

Select コンポーネントを非制御の入力として使用します。

サンプルを読み込み中...
<Select name="demo-001" label="Choose a pet" onChange={(e) => { console.log(e); }} > <option value="">Choose an option</option> <option value="dogs">Dogs</option> <option value="cats">Cats</option> </Select>

無効化

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

サンプルを読み込み中...
<Select name="demo-001" disabled label="Choose a pet"> <option value="">Choose an option</option> <option value="dogs">Dogs</option> <option value="cats">Cats</option> </Select>

幅

css プロパティと使用可能な値を使用して、Select コンポーネントの幅を設定します。

サンプルを読み込み中...
<Select css={{ width: 'fill', }} name="demo-001" label="Choose a pet" onChange={(e) => { console.log(e); }} > <option value="">Choose an option</option> <option value="dogs">Dogs</option> <option value="cats">Cats</option> </Select>

参照情報

  • 従うべき設計パターン
  • アプリのスタイル設定
  • UI テスト
このページはお役に立ちましたか。
はいいいえ
お困りのことがございましたら 、サポートにお問い合わせください。
早期アクセスプログラムにご参加ください。
変更ログをご覧ください。
ご不明な点がございましたら、お問い合わせください。
LLM ですか?llms.txt を読んでください。
Powered by Markdoc