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

Interruptor

Interruptores alternam o estado de uma única configuração ligado ou desligado.

Interruptores são a forma preferida de ajustes de configuração em mobile. The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label.

Interruptores básicos

Interruptores com FormControlLabel

O componente Switch pode ser fornecido com uma descrição graças ao componente FormControlLabel.

Interruptores com FormGroup

FormGroup é usado para agrupar componentes de seleção para facilitar o uso da API. FormGroup é usado para agrupar componentes de seleção para facilitar o uso da API. (Veja: Quando usar).

Assign responsibility

Be careful

Interruptores customizados

Aqui estão alguns exemplos 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.

Tamanhos

Gosta de interruptores menores? Use a propriedade size.

<FormGroup>
  <FormControlLabel
    control={<Switch size="small" checked={checked} onChange={toggleChecked} />}
    label="Small"
  />
  <FormControlLabel
    control={<Switch checked={checked} onChange={toggleChecked} />}
    label="Normal"
  />
</FormGroup>

Posicionamento do rótulo

Você pode alterar o posicionamento do rótulo:

Quando usar

Acessibilidade

  • Ele irá renderizar um elemento com a regra de checkbox e não switch, pois esta regra não é amplamente suportada ainda. Por favor, teste primeiro se a tecnologia assistiva do seu público-alvo suporta essa regra corretamente. Em seguida, você pode alterar a regra com <Switch inputProps={{ role: 'switch' }}>
  • 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.
<Switch value="checkedA" inputProps={{ 'aria-label': 'Switch A' }} />

API