Select
Utilisez un composant Select pour proposer un ensemble d'options dans une liste déroulante.
Pour ajouter le composant Select
à votre application :
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 |
Gestion des états
Utilisez le composant Select
comme une entrée non contrôlée :
<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
Les composants Select
prennent en charge les propriétés CSS suivantes :
Propriété | Type | Exemple |
width | 2/3 | |
Largeur du composant. Consultez la section Dimensionnement pour en savoir plus. |
Les composants Select
ne prennent pas en charge les autres propriétés CSS. Stylisez-les plutôt en utilisant leurs propriétés.
Désactivé
Vous pouvez désactiver un composant Select
afin d’éviter toute modification.
<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>
Largeur
Définissez la largeur du composant Select
en utilisant les valeurs disponibles avec la propriété css
:
<Select css={{width: 'fill'}}>