選択
選択は、ドロップダウンでのオプションセットからの選択に使用します。
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>
Props
Prop | Type | Description |
---|---|---|
aria-label |
| Text that describes the control. Only visible to screen readers, and is not clickable. Should not be used if `label` is set. |
autoComplete |
| |
autoFocus |
| |
children |
| |
defaultValue |
| |
description |
| Descriptive text that will be rendered adjacent to the control's label. |
disabled |
| Sets whether or not the element should be disabled. Prevents selection. |
error |
| Error text that will be rendered below the control. |
form |
| |
hiddenElements |
| Visually hides the specified elements. The hidden elements will still be present and visible to screen readers. |
invalid |
| Displays the component that indicates that the value is invalid |
label |
| Text that describes the control. Will be both visible and clickable. |
multiple |
| |
name |
| |
onChange |
| Function to call when the element's value changes. |
required |
| |
size |
| The size of the select control |
ステータス管理
Select
コンポーネントを非制御の入力として使用します。
<Select name="demo-001" onChange={(e) => { console.log(e); }} label="Choose a pet" > <option value="">Choose an option</option> <option value="dogs">Dogs</option> <option value="cats">Cats</option> </Select>
CSS
Select
コンポーネントは、以下の CSS プロパティをサポートします。
プロパティ | タイプ | 例 |
width | 2/3 | |
コンポーネントの幅。詳細については、サイズ指定をご覧ください。 |
Select
コンポーネントは、その他の CSS をサポートしていません。代わりにプロパティを使用してスタイルを設定してください。
無効化
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'}}>