Select
Use Select to pick from a set of options in a dropdown.
To add the Select
component to your app:
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 |
State management
Use the Select
component as an uncontrolled input:
<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
components support these CSS properties:
Property | Type | Example |
width | 2/3 | |
Component width. See Sizing for details. |
Select
components don’t support other CSS. Style them using their props instead.
Disabled
You can disable a Select
component, which prevents changes.
<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>
Width
Set the width of a Select
component using the available values with the css
prop:
<Select css={{width: 'fill'}}>