Switch
Les boutons bascule, comme les cases à cocher, peuvent servir à indiquer ou contrôler des valeurs booléennes.
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
.
<Switch label="This is a Switch." onChange={(e) => { console.log(e.target.checked); }} />
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. |
autoFocus |
| |
defaultChecked |
| |
description |
| Descriptive text that will be rendered adjacent to the control's label. |
disabled |
| |
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 |
| |
label |
| Text that describes the control. Will be both visible and clickable. |
name |
| |
onChange |
| |
readOnly |
| |
required |
| |
tabIndex |
| |
value |
|
Gestion des états
Utilisez le composant Switch
comme une entrée non contrôlée :
<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.
<Switch label="This Switch is disabled." defaultChecked disabled />