Composant Switch pour les applications Stripe

Tout comme les cases à cocher, les boutons bascule peuvent servir à indiquer ou contrôler des valeurs booléennes.

Version du SDK

Pour ajouter le composant Switch à votre application :

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

Les boutons bascule sont couramment utilisés pour les paramètres que vous sauvegardez immédiatement ; en d’autres termes, un formulaire élargi qui doit être soumis séparément contient rarement un composant Switch.

Voici un exemple simple de Switch.

Chargement de l'exemple...

<Switch
  label="This is a Switch."
  onChange={(e) => {
    console.log(e.target.checked);
  }}
/>

Propriétés du bouton bascule

Propriété	Type
`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.
`checked`	Facultatif `boolean \| undefined` Contrôle si la saisie est sélectionnée. Lorsque vous transmettez cette propriété, vous devez également transmettre un gestionnaire `onChange` qui met à jour la valeur transmise.
`defaultChecked`	Facultatif `boolean \| undefined` Spécifie la valeur initiale 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.
`name`	Facultatif `string \| undefined` Spécifie le nom de la saisie envoyée avec le formulaire.
`onChange`	Facultatif `((event: React.ChangeEvent<HTMLInputElement>) => 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.
`readOnly`	Facultatif `boolean \| undefined` Si cette propriété est définie sur `true`, l’utilisateur ne peut pas modifier la saisie.
`required`	Facultatif `boolean \| undefined` Si cette propriété est définie sur `true`, une valeur doit être renseignée pour soumettre le formulaire.
`tabIndex`	Facultatif `number \| undefined` Remplace le comportement par défaut de la touche de tabulation. Évitez d’utiliser des valeurs autres que `-1` et `0`.
`value`	Facultatif `string \| undefined` Contrôle le texte saisi. Lorsque vous transmettez cette propriété, vous devez également transmettre un gestionnaire `onChange` qui met à jour la valeur transmise.

Gestion des états

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

Chargement de l'exemple...

<Switch
  onChange={(e) => {
    console.log(e.target.checked);
  }}
  defaultChecked
  label="This Switch is uncontrolled."
/>

Désactivé

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

Chargement de l'exemple...

<Switch label="This Switch is disabled." defaultChecked disabled />

Composant Switch pour les applications Stripe

Tout comme les cases à cocher, les boutons bascule peuvent servir à indiquer ou contrôler des valeurs booléennes.

Propriétés du bouton bascule

Gestion des états

Désactivé

Voir aussi