Pular para o conteúdo
Ajude a traduzir esta página

Botões de opção

Botões de opção permitem o usuário selecionar uma das opções de um conjunto.

Use botões de opção quando um usuário precisar ver todas as opções disponíveis. Se várias opções podem ser suprimidas da visualização, considere usar um menu suspenso (dropdown), pois ele utiliza menos espaço.

Os botões de opção devem ter a opção mais comumente usada selecionada por padrão.

RadioGroup

RadioGroup é um wrapper útil usado para agrupar componentes Radio fornecendo uma API mais fácil, e adequá a acessibilidade pelo teclado para o grupo.

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>

Standalone radio buttons

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

Posicionamento do Rótulo

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>

Opções customizadas

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.

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>

Quando usar

Acessibilidade

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

  • Todos os controles de formulário devem ter rótulos, e isso inclui os botões de opção, caixas de seleção e seletores. Na maioria dos casos, isso é feito usando o elemento <label> (FormControlLabel).
  • Quando um rótulo não pode ser usado, é necessário adicionar um atributo diretamente no componente de entrada. Nesse caso você pode aplicar um atributo adicional (e.g.aria-label,aria-labelledby, title) através da propriedade inputProps.
<RadioButton
  value="radioA"
  inputProps={{ 'aria-label': 'Radio A' }}
/>

API