Lorsqu'un utilisateur ne peut choisir qu'une seule des options proposées
L'état du bouton radio peut être contrôlé via la propriété checked . Si l'accessoire checked n'est pas défini, le bouton radio gérera son propre état.
Vous pouvez écouter l'événement du bouton radio via les accessoires onClick ou onChange .
Usage
import { Radio } from 'nr1'Exemples
Basique
<div className="nr1-Docs-prettify"> <Radio onChange={(event) => alert('Foo')} label="Foo" /> <Radio checked label="Bar" /> <Radio checked disabled label="Baz" /></div>Avec info
<Radio onChange={(event) => alert('Foo')} info="Info value" label="Foo" />Avec description
<Radio onChange={(event) => alert('Foo')} description="Description value" label="Foo"/>Avec un message invalide
<Radio onChange={(event) => alert('Foo')} invalid="Invalid message value" label="Foo"/>Composant contrôlé
class MyNerdlet extends React.PureComponent { constructor(props) { super(props);
this.state = { isChecked: false, };
this.onClick = this.onClick.bind(this); }
onClick(event) { this.setState((state) => { return { isChecked: !state.isChecked }; }); }
render() { return ( <Radio checked={this.state.isChecked} onClick={this.onClick} label="Radio button" /> ); }}Accessoires
booléen | Si |
chaîne | Ajoute les noms de classe au composant. Doit être utilisé uniquement à des fins de positionnement et d'espacement. |
chaîne | Message avec des instructions sur la façon de remplir le champ du formulaire. |
booléen | Si |
chaîne | Des informations supplémentaires peuvent être affichées dans une info-bulle à côté de l'étiquette. |
booléen|chaîne | Lorsque cette option est vraie, elle définit le champ dans un état non valide, afin d'avertir l'utilisateur qu'une attention particulière est nécessaire sur ce champ particulier. Cette propriété peut être un champ |
chaîne | Texte à afficher comme étiquette. |
fonction | Rappel déclenché à chaque fois que l'état sélectionné du bouton radio change. function ( |
fonction | Rappel déclenché à chaque fois que le bouton radio est cliqué. function ( |
énumération[] | Propriété d'espacement. L'espacement est défini comme un uplet de zéro à quatre valeurs, qui suivent les mêmes conventions que les propriétés CSS comme <Array of |
objet | Style en ligne pour un style personnalisé. Doit être utilisé uniquement à des fins de positionnement et d'espacement. |
chaîne | Ajoute un attribut |
chaîne | La valeur du composant. Utilisé par le |