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

O componente FormGroup é um encapsulador usado para agrupar componentes de seleção para fornecer uma API facilitada. No entanto, é recomendado usar caixas de seleção, se vários controles relacionados forem necessários. (Veja: Quando usar).

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

• Caixas de seleção vs. interruptores

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 (por exemplo, aria-label,aria-labelledby, title) através da propriedade inputProps.

<Switch value="checkedA" inputProps={{ 'aria-label': 'Switch A' }} />

API

• <FormControl />
• <FormControlLabel />
• <FormGroup />
• <FormLabel />
• <Switch />