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 プロパティ
プロパティー | タイプ |
---|---|
| 必須
コンポーネントのコンテンツ。 |
| オプション
オートコンプリート動作の 1 つを指定します。 |
| オプション
|
| オプション
関連タイプ: CSS。 |
| オプション
文字列 (または |
| オプション
コントロールのラベルの横にレンダリングされる説明テキスト。 |
| オプション
要素を無効化するかどうかを設定します。選択できなくなります。 |
| オプション
コントロールの下に表示されるエラーテキスト。 |
| オプション
この入力が属する |
| オプション
指定した要素を視覚的に非表示にします。非表示の要素は引き続き存在しており、スクリーンリーダーに表示されます。 |
| オプション
要素が無効な状態であるかどうかを設定します。これは、表示専用のプロパティであり、フォーム送信を妨げるものではありません。 |
| オプション
コントロールを説明するテキスト。表示され、クリック可能になります。 |
| オプション
|
| オプション
フォームと共に送信されるこの入力の名前を指定します。 |
| オプション
制御入力に必須です。入力の値をユーザーが変更するとすぐに発生します (たとえば、キーストロークのたびに起動されます)。ブラウザーの入力イベントのように動作します。 |
| オプション
|
| オプション
コンポーネントのサイズ。 |
| オプション
文字列 (または |
CSS
プロパティー | タイプ |
---|---|
| オプション
コンポーネントの幅。詳細については、サイズ指定をご覧ください。 |
ステータス管理
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>