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

<Switch {...label} defaultChecked />
<Switch {...label} />
<Switch {...label} disabled defaultChecked />
<Switch {...label} disabled />

Caixas de seleção com FormGroup

You can provide a label to the Switch thanks to the FormControlLabel component.

<FormGroup>
  <FormControlLabel control={<Switch defaultChecked />} label="Label" />
  <FormControlLabel disabled control={<Switch />} label="Disabled" />
</FormGroup>

Tamanho

Use the size prop to change the size of the switch.

<Switch {...label} defaultChecked size="small" />
<Switch {...label} defaultChecked />

Cor

<Switch {...label} defaultChecked />
<Switch {...label} defaultChecked color="secondary" />
<Switch {...label} defaultChecked color="warning" />
<Switch {...label} defaultChecked color="default" />
<GreenSwitch {...label} defaultChecked />

Controlled

You can control the switch with the checked and onChange props:

<Switch
  checked={checked}
  onChange={handleChange}
  inputProps={{ 'aria-label': 'controlled' }}
/>

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.

Off

On

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

Posicionamento do rótulo

Você pode alterar o posicionamento do rótulo:

Label placement

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 (por exemplo, aria-label,aria-labelledby, title) através da propriedade inputProps.
<Switch value="checkedA" inputProps={{ 'aria-label': 'Switch A' }} />

API