Composant de case à cocher pour les applications Stripe

Utilisez des cases à cocher pour indiquer ou contrôler des valeurs booléennes.

Version du SDK

Pour ajouter le composant Checkbox à votre application :

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

Chargement de l'exemple...

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

Outre les attributs DOM natifs pertinents, Checkbox possède également les propriétés suivantes.

Propriétés de Checkbox

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.
`indeterminate`	Facultatif `boolean \| undefined` Définit si la `Checkbox` doit s’afficher à l’état indéterminé (« partiellement cochée ») ou non. Notez que cette opération est purement visuelle et ne changera pas l’état réel `checked` de la `Checkbox`. Si une `Checkbox` est à la fois `indeterminate` et `checked`, elle s’affichera comme `indeterminate`.
`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.

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

Chargement de l'exemple...

const [checked1, setChecked1] = React.useState(false);
const [checked2, setChecked2] = React.useState(true);

const allChecked = checked1 && checked2;

const handleAggregateChange = () => {
  if (checked1 && checked2) {
    setChecked1(false);
    setChecked2(false);
  } else {
    setChecked1(true);
    setChecked2(true);
  }
};

return (
  <Box
    css={{
      stack: 'y',
    }}
  >
    <Checkbox
      label="This Checkbox is aggregating the state of the Checkboxes below it."
      checked={allChecked}
      indeterminate={checked1 !== checked2}
      onChange={handleAggregateChange}
    />
    <Checkbox
      label="Checkbox 1"
      checked={checked1}
      onChange={(e) => {
        setChecked1(e.target.checked);
      }}
    />
    <Checkbox
      label="Checkbox 2"
      checked={checked2}
      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.

Chargement de l'exemple...

<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 uniquement d’une propriété de style, utile pour la validation des formulaires. Notez que cela n’empêchera pas la soumission du formulaire.

Chargement de l'exemple...

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

Chargement de l'exemple...

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

Composant de case à cocher pour les applications Stripe

Utilisez des cases à cocher pour indiquer ou contrôler des valeurs booléennes.

Propriétés de Checkbox

Indéterminé

Désactivé

Non valide

Gestion des états

Voir aussi