Composant de radio pour les applications Stripe

Utilisez les boutons radio pour permettre à l'utilisateur de faire un choix parmi un ensemble d'options mutuellement exclusives.

Version du SDK

Pour ajouter le composant Radio à votre application :

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

Chargement de l'exemple...

<Radio label="This is a Radio." />

Propriétés radio

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` Permet de rassembler plusieurs `Radios` en un seul groupe mutuellement exclusif, pour les cas d’usage non contrôlés.
`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.

Désactivé

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

Chargement de l'exemple...

<Radio name="group" label="Ah ah ah" disabled />
<Radio
  name="group"
  disabled
  defaultChecked
  label="You didn't say the magic word"
/>

Non valide

Radio peut être non valide.

Chargement de l'exemple...

<Radio label="This is an invalid input" invalid />

Gestion des états

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

Chargement de l'exemple...

<Radio
  name="group"
  label="Have some of Column A"
  onChange={(e) => {
    console.log(e.target.checked);
  }}
/>
<Radio
  name="group"
  label="Try all of Column B"
  onChange={(e) => {
    console.log(e.target.checked);
  }}
/>

Composant de radio pour les applications Stripe

Utilisez les boutons radio pour permettre à l'utilisateur de faire un choix parmi un ensemble d'options mutuellement exclusives.

Propriétés radio

Désactivé

Non valide

Gestion des états

Voir aussi