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

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

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

Tamanho

Use a propriedade size para alterar o tamanho do interruptor.

<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

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

<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

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

Posicionamento do rótulo

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

Unstyled component

import SwitchUnstyled from '@mui/base/SwitchUnstyled';

The SwitchUnstyled component provides default components and assigns CSS classes you can style entirely on your own. You are free to choose any styling solution - plain CSS classes, a CSS framework, Emotion, etc. It is also possible to replace these default components by other HTML elements or custom components.

There are three components you can override by the components prop: Root, Thumb and Input. Each one's props can be set using the componentsProps object.

<SwitchUnstyled component={Root} {...label} defaultChecked />
<SwitchUnstyled component={Root} {...label} />
<SwitchUnstyled component={Root} {...label} defaultChecked disabled />
<SwitchUnstyled component={Root} {...label} disabled />

useSwitch hook

For the ultimate customizability, a useSwitch hook is available. It accepts almost the same options as the SwitchUnstyled component minus the component, components, and componentsProps props.

import { useSwitch } from '@mui/base/SwitchUnstyled';

Basic example

<BasicSwitch defaultChecked />
<BasicSwitch />
<BasicSwitch defaultChecked disabled />
<BasicSwitch disabled />

Customized look and feel

<MUISwitch defaultChecked />

Quando usar

Você pode alterar o posicionamento do rótulo:

Label placement

Acessibilidade

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. 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.
<code><Switch value="checkedA" inputProps={{ 'aria-label': 'Switch A' }} /></code>

API