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

Caixa de seleção

Caixas de seleção permitem ao usuário selecionar um ou mais itens de um conjunto.

Caixas de Seleção podem ser usadas para ativar ou desativar uma opção.

Se você tem várias opções aparecendo em uma lista, você pode economizar espaço usando caixas de seleção ao invés de interruptores liga/desliga. Se você tem uma única opção, evite usar uma caixa de seleção e use um interruptor de liga/desliga.

Caixa de seleção básica

Caixa de seleção com FormControlLabel

Uma caixa de seleção só pode ter dois estados em um formulário: marcado ou desmarcado. Ou submete o seu valor ou não. Visualmente, existem na verdade três estados em que a caixa de seleção pode estar em: marcada, desmarcada ou indeterminada.

<FormControlLabel
  label="Parent"
  control={
    <Checkbox
      checked={checked[0] && checked[1]}
      indeterminate={checked[0] !== checked[1]}
      onChange={handleChange1}
      color="primary"
    />
  }
/>
{children}

Caixas de seleção com FormGroup

O componente Checkbox pode ser exibido com um rótulo graças ao componente FormControlLabel.

Posicionamento do rótulo

FormGroup é usado para agrupar componentes de seleção para facilitar o uso da API.

Assign responsibility

Be careful

Pick two

You can display an error

Posicionamento do rótulo

Você pode alterar o posicionamento do rótulo:

Label Placement

Caixa de seleção customizada

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

🎨 Se você está procurando inspiração, você pode verificar os exemplos de customização de MUI Treasury.

Quando usar

Acessibilidade

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

  • Todos os controles de formulário devem ter rótulos, e isso inclui os botões de opção, caixas de seleção e interruptores. 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.
<Checkbox
  value="checkedA"
  inputProps={{ 'aria-label': 'Checkbox A' }}
/>

API