Case à cocher
Pour ajouter le composant Checkbox
à votre application :
import {Checkbox} from '@stripe/ui-extension-sdk/ui';
<Checkbox label="This is a Checkbox." onChange={(e) => { console.log(e.target.checked); }} />
Outre les attributs DOM natifs appropriés, Checkbox
possède également les props suivants.
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. |
indeterminate |
| Sets whether the Checkbox should be rendered as indeterminate ("partially checked") or not. Note that this is purely visual, and will not change the actual `checked` state of the Checkbox. If a Checkbox is both `indeterminate` and `checked`, it will display as `indeterminate`. |
invalid |
| |
label |
| Text that describes the control. Will be both visible and clickable. |
name |
| |
onChange |
| |
readOnly |
| |
required |
| |
tabIndex |
| |
value |
|
Vous pouvez définir un composant Checkbox
sur différents états :
indeterminate
disabled
invalid
Indéterminé
Le composant Checkbox
peut avoir l’état indeterminate
, utile lorsque lorsqu’il représente l’état agrégé d’un autre ensemble de cases à cocher, dont certaines peuvent être cochées et d’autres non. Notez que cette propriété est strictement esthétique, elle n’affecte pas l’état sous-jacent de Checkbox, à savoir coché.
const [checked1, setChecked1] = React.useState(false); const [checked2, setChecked2] = React.useState(true); return ( <Box css={{ stack: 'x', }} > <Checkbox label="This Checkbox is aggregating the state of the Checkboxes below it." readOnly key={checked1 && checked2} defaultChecked={checked1 && checked2} indeterminate={checked1 !== checked2} /> <Checkbox label="Checkbox 1" onChange={(e) => { setChecked1(e.target.checked); }} /> <Checkbox label="Checkbox 2" defaultChecked onChange={(e) => { setChecked2(e.target.checked); }} /> </Box> );
Désactivé
Vous pouvez désactiver le paramètre Checkbox
en spécifiant disabled
. Cela permet d’éviter toute modification.
<Checkbox label="This Checkbox is disabled." defaultChecked disabled /> <Checkbox disabled invalid label="This invalid Checkbox is disabled." />
Non valide
Vous pouvez marquer Checkbox
comme invalid
. Il s’agit d’un prop de style uniquement, utile pour la validation des formulaires. Notez que cela n’empêchera pas la soumission du formulaire.
<Checkbox label="This Checkbox is in an invalid state." invalid />
Gestion des états
Utilisez le composant Checkbox
comme une entrée non contrôlée :
<Checkbox onChange={(e) => { console.log(e.target.checked); }} defaultChecked label="This Checkbox is uncontrolled." />