Sélectionner un composant pour les applications Stripe

Utilisez le composant Select pour permettre à l'utilisateur de faire un choix parmi un ensemble d'options dans une liste déroulante.

Version du SDK

Pour ajouter le composant Select à votre application :

import {Select} from '@stripe/ui-extension-sdk/ui';

Chargement de l'exemple...

<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>

Propriétés de la sélection

Propriété	Type
`children`	Obligatoire `React.ReactNode` Le contenu du composant.
`autoComplete`	Facultatif `string \| undefined` Spécifie l’un des comportements de saisie semi-automatique possibles.
`autoFocus`	Facultatif `boolean \| undefined` Si cette propriété est définie sur `true`, React placera le focus sur l’élément lors de son montage.
`css`	Facultatif `CSS \| undefined` Types associés : CSS.
`defaultValue`	Facultatif `(string \| string[]) \| undefined` Une chaîne (ou un tableau de chaînes pour `multiple={true}`). Indique l’option initialement sélectionnée modifiable par un utilisateur.
`description`	Facultatif `string \| undefined` Texte descriptif qui sera affiché à côté du libellé du contrôle.
`disabled`	Facultatif `boolean \| undefined` Indique si l’élément doit être désactivé ou non. Empêche la sélection.
`error`	Facultatif `string \| undefined` Texte d’erreur qui sera affiché sous le contrôle.
`form`	Facultatif `string \| undefined` Spécifie l’`id` du `<form>` auquel cette saisie appartient. S’il est omis, il s’agit du formulaire parent le plus proche.
`hiddenElements`	Facultatif `("label" \| "description" \| "error")[] \| undefined` Masque visuellement les éléments spécifiés. Les éléments masqués sont toujours présents et visibles des lecteurs d’écran.
`invalid`	Facultatif `boolean \| undefined` Indique si l’élément est à l’état non valide ou non. Il s’agit uniquement d’une propriété d’affichage, qui n’empêche pas la soumission du formulaire.
`label`	Facultatif `React.ReactNode` Texte décrivant le contrôle. Il est à la fois visible et cliquable.
`multiple`	Facultatif `boolean \| undefined` Si cette propriété est définie sur `true`, le navigateur autorise la sélection multiple.
`name`	Facultatif `string \| undefined` Spécifie le nom de la saisie envoyée avec le formulaire.
`onChange`	Facultatif `((event: React.ChangeEvent<HTMLSelectElement>) => void) \| undefined` Obligatoire pour les saisies contrôlées. Se déclenche immédiatement lorsque la valeur de la saisie est modifiée par l’utilisateur (par exemple, à chaque fois qu’il appuie sur une touche du clavier). Se comporte comme l’événement de saisie du navigateur.
`required`	Facultatif `boolean \| undefined` Si cette propriété est définie sur `true`, une valeur doit être renseignée pour soumettre le formulaire.
`size`	Facultatif `("small" \| "medium" \| "large") \| undefined` La taille du composant.
`value`	Facultatif `(string \| string[]) \| undefined` Une chaîne (ou un tableau de chaînes si `multiple={true}`). Contrôle l’option sélectionnée.

CSS

Propriété Type

Propriété	Type
`width`	Facultatif `(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` Largeur du composant. Pour en savoir plus, consultez la section Dimensions.

width

Facultatif

(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

Largeur du composant. Pour en savoir plus, consultez la section Dimensions.

Gestion des états

Utilisez le composant Select comme entrée non contrôlée :

Chargement de l'exemple...

<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>

Désactivé

Vous pouvez désactiver un composant Select afin d’éviter toute modification.

Chargement de l'exemple...

<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 :

Chargement de l'exemple...

<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>

Sélectionner un composant pour les applications Stripe

Utilisez le composant Select pour permettre à l'utilisateur de faire un choix parmi un ensemble d'options dans une liste déroulante.

Propriétés de la sélection

CSS

Gestion des états

Désactivé

Largeur

Voir aussi