Passer au contenu

🎉 Material UI v5 is out now! Check out the announcement blog post →

Aidez à traduire cette page

Radio

Les radios buttons permettent a l'utilisateur de sélectionner un choix parmi un ensemble de choix.

Ici buttons radio toutes les options. Si les options disponibles peuvent être réduites, envisagez d'utiliser un menu déroulant, car il utilise moins d'espace disponibles.

Généralement, les cases d'option doivent avoir l'option la plus utilisée sélectionnée par défaut.

RadioGroup

RadioGroup est un gestionnaire utile pour regrouper des composants Radio qui fournit une API plus facile et une accessibilité adéquate au clavier.

Gender
<FormControl component="fieldset">
  <FormLabel component="legend">Gender</FormLabel>
  <RadioGroup aria-label="gender" name="gender1" value={value} onChange={handleChange}>
    <FormControlLabel value="female" control={<Radio />} label="Female" />
    <FormControlLabel value="male" control={<Radio />} label="Male" />
    <FormControlLabel value="other" control={<Radio />} label="Other" />
    <FormControlLabel value="disabled" disabled control={<Radio />} label="(Disabled option)" />
  </RadioGroup>
</FormControl>

To lay out the buttons horizontally, set the row prop: <RadioGroup row />.

Standalone radio buttons

Radio can also be used standalone, without the RadioGroup wrapper.

Emplacement du label

You can change the placement of the label with the FormControlLabel component's labelPlacement prop:

labelPlacement

Show error

In general, radio buttons should have a value selected by default. If this is not the case, you can display an error if no value is selected when the form is submitted:

Pop quiz: Material-UI is...

Choose wisely

<form onSubmit={handleSubmit}>
  <FormControl component="fieldset" error={error} className={classes.formControl}>
    <FormLabel component="legend">Pop quiz: Material-UI is...</FormLabel>
    <RadioGroup aria-label="quiz" name="quiz" value={value} onChange={handleRadioChange}>
      <FormControlLabel value="best" control={<Radio />} label="The best!" />
      <FormControlLabel value="worst" control={<Radio />} label="The worst." />
    </RadioGroup>
    <FormHelperText>{helperText}</FormHelperText>
    <Button type="submit" variant="outlined" color="primary" className={classes.button}>
      Check Answer
    </Button>
  </FormControl>
</form>

Customized radios

Voici un exemple de personnalisation du composant. Vous pouvez en savoir plus dans la page de documentation des overrides.

Gender
<FormControl component="fieldset">
  <FormLabel component="legend">Gender</FormLabel>
  <RadioGroup defaultValue="female" aria-label="gender" name="customized-radios">
    <FormControlLabel value="female" control={<StyledRadio />} label="Female" />
    <FormControlLabel value="male" control={<StyledRadio />} label="Male" />
    <FormControlLabel value="other" control={<StyledRadio />} label="Other" />
    <FormControlLabel
      value="disabled"
      disabled
      control={<StyledRadio />}
      label="(Disabled option)"
    />
  </RadioGroup>
</FormControl>

Quand les utiliser

Accessibilité

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#radiobutton)

  • Tous les contrôles de formulaire doivent avoir des labels, cela vaut également pour les boutons radio, les cases à cocher et les interrupteurs. Dans la plupart des cas, cela se fait en utilisant l'élément <label> (FormControlLabel).
  • Lorsqu'un label ne peut pas être utilisé, il est nécessaire d'ajouter un attribut directement au composant input. Dans ce cas, vous pouvez appliquer l'attribut supplémentaire (ex: aria-label, aria-labelledby, title) via la propriété inputProps.
<RadioButton
  value="radioA"
  inputProps={{ 'aria-label': 'Radio A' }}
/>

API