Un groupe de <Radio>
boutons. Les boutons <Radio>
peuvent être des enfants directs ou des descendants du groupe radio. <Radio>
boutons à l'intérieur d'un groupe radio doivent avoir un value
unique attribué.
Une fois qu'un groupe radio est établi, la sélection de n'importe quel <Radio>
dans ce groupe désélectionne automatiquement tout <Radio>
actuellement sélectionné dans le groupe.
Remarque: le paramètre value
remplacera defaultValue
car il place le RadioGroup
dans un état contrôlé. value
ne remplacera pas Radio
les composants qui ont checked
défini, car RadioGroup
prendra le contrôle des composants Radio
non contrôlés et ne pourra pas remplacer ceux contrôlés.
Le gestionnaire d'événements onChange
pour RadioGroup
se déclenchera après tout gestionnaire d'événements onChange
défini sur des composants Radio
individuels. Cependant, il est fortement recommandé de ne définir qu'un seul gestionnaire d'événements pour l'ensemble du groupe dans un RadioGroup
contrôlé.
Usage
import { RadioGroup } from 'nr1'
Exemples
Basique
<RadioGroup defaultValue="2"> <Radio label="Radio 1" value="1" /> <Radio label="Radio 2" value="2" /> <Radio label="Radio 3" value="3" /></RadioGroup>
Avec étiquette et informations
<RadioGroup label="Radio Group" info="Info value" defaultValue="2"> <Radio label="Radio 1" value="1" /> <Radio label="Radio 2" value="2" /> <Radio label="Radio 3" value="3" /></RadioGroup>
Avec étiquette en ligne
<RadioGroup label="Radio Group" labelInline defaultValue="2"> <Radio label="Radio 1" value="1" /> <Radio label="Radio 2" value="2" /> <Radio label="Radio 3" value="3" /></RadioGroup>
Avec description
<RadioGroup label="Radio Group" description="Description value" defaultValue="2"> <Radio label="Radio 1" value="1" /> <Radio label="Radio 2" value="2" /> <Radio label="Radio 3" value="3" /></RadioGroup>
Avec un message invalide
<RadioGroup label="Radio Group" invalid="Invalid message value" defaultValue="2"> <Radio label="Radio 1" value="1" /> <Radio label="Radio 2" value="2" /> <Radio label="Radio 3" value="3" /></RadioGroup>
Composant contrôlé
class MyNerdlet extends React.PureComponent { constructor(props) { super(props);
this.state = { selectedValue: '2', };
this.onChange = this.onChange.bind(this); }
onChange(event, value) { this.setState((state) => { return { selectedValue: value }; }); }
render() { return ( <RadioGroup value={this.state.selectedValue} onChange={this.onChange}> <Radio label="Radio 1" value="1" /> <Radio label="Radio 2" value="2" /> <Radio label="Radio 3" value="3" /> </RadioGroup> ); }}
Accessoires
nœud | Contenu du RadioGroup. |
chaîne | Ajoute les noms de classe au composant. |
n'importe lequel | Valeur par défaut du groupe radio. Le |
chaîne | Message avec des instructions sur la façon de remplir le champ du formulaire. |
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. |
booléen | Affichez l'étiquette en ligne dans le contrôle de formulaire. À utiliser uniquement lorsque le composant n'est pas à l'intérieur d'un |
fonction | Rappel qui est déclenché lorsque la valeur du groupe radio change (un function ( |
booléen | Si |
objet | Style en ligne pour un style personnalisé. |
chaîne | Ajoute un attribut |
n'importe lequel | Valeur du groupe radio. Le bouton radio avec la valeur correspondante sera sélectionné. S'il est défini, il transforme le composant en composant contrôlé. |