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. A opção que o interruptor controla, juntamente com o estado atual, deve ser claramente explícita no rótulo em linha correspondente.

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