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 />

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

Press Enter to start editing

Caixas de seleção com FormGroup

Você pode fornecer um rótulo para o Switch graças ao componente FormControlLabel.

LabelDisabled

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

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

Press Enter to start editing

Tamanho

Use a propriedade size para alterar o tamanho do interruptor.

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

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

Press Enter to start editing

Cor

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

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

Press Enter to start editing

Controlled

Você pode controlar o interruptor com as propriedades checked e onChange:

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

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

Press Enter to start editing

Interruptores com FormGroup

FormGroup is a helpful wrapper used to group selection controls components that provides an easier API. However, you are encouraged to use Checkboxes instead if multiple related controls are required. (Veja: Quando usar).

Assign responsibility

Gilad GrayJason KillianAntoine Llorca

Be careful

Interruptores customizados

Aqui estão alguns exemplos de customização do componente. You can learn more about this in the overrides documentation page.

MUI switchAndroid 12iOS style

Off

On

🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.

Label placement

You can change the placement of the label:

Label placement

TopStartBottomEnd

When to use

Caixas de seleção vs. interruptores

Accessibility

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. In most cases, this is done by using the <label> element (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' }} />

Unstyled

The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.

API