• /
  • EnglishEspañolFrançais日本語한국어Português
  • Se connecterDémarrer

Cette traduction automatique est fournie pour votre commodité.

En cas d'incohérence entre la version anglaise et la version traduite, la version anglaise prévaudra. Veuillez visiter cette page pour plus d'informations.

Créer un problème

RadioGroup

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

children

nœud

Contenu du RadioGroup.

className

chaîne

Ajoute les noms de classe au composant.

defaultValue

n'importe lequel

Valeur par défaut du groupe radio. Le <Radio> avec la valeur correspondante sera sélectionné. Utile lorsque vous ne souhaitez pas utiliser un composant contrôlé.

description

chaîne

Message avec des instructions sur la façon de remplir le champ du formulaire.

info

chaîne

Des informations supplémentaires peuvent être affichées dans une info-bulle à côté de l'étiquette.

invalid

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 boolean ou un string. Lorsqu'il s'agit d'un string, ainsi que de l'état invalide affiché, le texte sera affiché ci-dessous.

label

chaîne

Texte à afficher comme étiquette.

labelInline

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 Form. Dans ce cas, définissez layoutType sur Form.LAYOUT_TYPE.SPLIT dans le composant Form.

onChange

fonction

Rappel qui est déclenché lorsque la valeur du groupe radio change (un <Radio> dans le groupe est sélectionné).

function (
event: react.ChangeEvent,

Event source of the callback.

value: any

The value of the selected radio button.

)

required

booléen

Si true, indique que le champ de formulaire est obligatoire.

style

objet

Style en ligne pour un style personnalisé.

testId

chaîne

Ajoute un attribut data-test-id. Utilisez-le pour cibler le composant dans les tests unitaires et E2E. Pour qu'un identifiant de test soit valide, préfixez-le avec votre identifiant nerdpack, suivi d'un point. Par exemple, my-nerdpack.some-element.Remarque : vous ne verrez peut-être pas l'attribut data-test-id car ils sont supprimés du DOM. Pour les déboguer, transmettez un paramètre de requête e2e-test à l'URL.

value

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

Droits d'auteur © 2025 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.