Switch API

Documentação da API para o componente React Switch . Aprenda sobre as propriedades disponíveis e a API CSS.

Demonstrações

For examples and details on the usage of this React component, visit the component demo pages:

Importação

import Switch from '@mui/material/Switch';
// ou
import { Switch } from '@mui/material';

Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

The name MuiSwitch can be used when providing default props or style overrides in the theme.

Propriedades

Nome	Tipo	Padrão	Descrição
checked	bool	false	If `true`, the component is checked.
checkedIcon	node		The icon to display when the component is checked.
classes	object		Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
color	'default' \| 'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning' \| string	'primary'	The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.
defaultChecked	bool	false	The default checked state. Use when the component is not controlled.
disabled	bool	false	Se `true`, o componente está desabilitado.
disableRipple	bool	false	If `true`, the ripple effect is disabled.
edge	'end' \| 'start' \| false	false	If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape).
icon	node		The icon to display when the component is unchecked.
id	string		The id of the `input` element.
inputProps	object		Attributes applied to the `input` element.
inputRef	ref		Pass a ref to the `input` element.
onChange	func		Callback fired when the state is changed. Signature: `function(event: object) => void` event: The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). You can pull out the new checked state by accessing `event.target.checked` (boolean).
required	bool	false	If `true`, the `input` element is required.
size	'medium' \| 'small' \| string	'medium'	The size of the switch. `small` is equivalent to the dense switch styling.
sx	Array<func \| object \| bool> \| func \| object		The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
value	any		The value of the component. The DOM API casts this to a string. The browser uses "on" as the default value.

O ref é encaminhado para o elemento raiz.

Herança

While not explicitly documented above, the props of the IconButton component are also available on Switch. You can take advantage of this to target nested components.

CSS

Nome da regra	Classe global	Descrição
root	.MuiSwitch-root	Estilos aplicados ao elemento raiz.
edgeStart	.MuiSwitch-edgeStart	Estilos aplicados para o elemento raiz se `edge="start"`.
edgeEnd	.MuiSwitch-edgeEnd	Estilos aplicados para o elemento raiz se `edge="end"`.
switchBase	.MuiSwitch-switchBase	Estilos aplicados a the internal `SwitchBase` component's `root` class.
colorPrimary	.MuiSwitch-colorPrimary	Estilos aplicados para the internal SwitchBase component's root element se `color="primary"`.
colorSecondary	.MuiSwitch-colorSecondary	Estilos aplicados para the internal SwitchBase component's root element se `color="secondary"`.
sizeSmall	.MuiSwitch-sizeSmall	Estilos aplicados para o elemento raiz se `size="small"`.
sizeMedium	.MuiSwitch-sizeMedium	Estilos aplicados para o elemento raiz se `size="medium"`.
checked	.Mui-checked	Pseudo-class applied to the internal `SwitchBase` component's `checked` class.
disabled	.Mui-disabled	Pseudo-class applied to the internal SwitchBase component's disabled class.
input	.MuiSwitch-input	Estilos aplicados a the internal SwitchBase component's input element.
thumb	.MuiSwitch-thumb	Styles used to create the thumb passed to the internal `SwitchBase` component `icon` prop.
track	.MuiSwitch-track	Estilos aplicados a the track element.

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.