# Composant de case à cocher pour les applications Stripe Utilisez des cases à cocher pour indiquer ou contrôler des valeurs booléennes. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/checkbox?app-sdk-version=8. Pour ajouter le composant `Checkbox` à votre application : ```js import {Checkbox} from '@stripe/ui-extension-sdk/ui'; ``` Outre les [attributs DOM natifs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox) 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 `
` 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) => 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 être dans un état `indeterminate`. Cela est utile lorsqu’il représente l’état agrégé d’un ensemble d’autres cases à cocher, dont certaines peuvent être cochées et d’autres non. Notez que cette propriété est purement visuelle et n’affecte pas l’état coché sous-jacent du Checkbox. ## Désactivé Vous pouvez désactiver le paramètre `Checkbox` en spécifiant `disabled`. Cela permet d’éviter toute modification. ## 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. ## Gestion des états Utilisez le composant `Checkbox` comme une [entrée non contrôlée](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md#use-uncontrolled-components-for-interactions) : # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/checkbox?app-sdk-version=9. Pour ajouter le composant `Checkbox` à votre application : ```js import {Checkbox} from '@stripe/ui-extension-sdk/ui'; ``` Outre les [attributs DOM natifs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox) 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 `` 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) => 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 être dans un état `indeterminate`. Cela est utile lorsqu’il représente l’état agrégé d’un ensemble d’autres cases à cocher, dont certaines peuvent être cochées et d’autres non. Notez que cette propriété est purement visuelle et n’affecte pas l’état coché sous-jacent du Checkbox. ## Désactivé Vous pouvez désactiver le paramètre `Checkbox` en spécifiant `disabled`. Cela permet d’éviter toute modification. ## 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. ## Gestion des états Utilisez le composant `Checkbox` comme une [entrée non contrôlée](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md#use-uncontrolled-components-for-interactions) : ## See also - [Modèles de conception](https://docs.stripe.com/stripe-apps/patterns.md) - [Styliser votre application](https://docs.stripe.com/stripe-apps/style.md) - [Tests d’interface utilisateur](https://docs.stripe.com/stripe-apps/ui-testing.md)