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

Switch (seletor)

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(label) inline correspondente.

Basic switches

Switch with FormControlLabel

Switch can be provided with a description thanks to the FormControlLabel component.

Interruptores com FormGroup

FormGroup é um componente encapsulador usado para agrupar componentes de seleção para fornecer uma fácil API. However, you are encouraged you to use Checkboxes instead if multiple related controls are required. (See: When to use).

Assign responsibility

Be careful

Interruptores customizados

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

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

  • It will render an element with the checkbox role not switch role since this role isn't widely supported yet. Please test first if assistive technology of your target audience supports this role properly. Then you can change the role with <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 seletores. 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