import Switch from '@mui/material/Switch';
// or
import { Switch } from '@mui/material';
Learn about the difference by reading this guide on minimizing bundle size.
Props of the IconButton component are also available.
Name | Type | Default | Description |
---|---|---|---|
checked | bool | - | If true , the component is checked. |
checkedIcon | node | - | The icon to display when the component is checked. |
classes | object | - | Override or extend the styles applied to the component. See CSS classes API below for more details. |
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 | - | The default checked state. Use when the component is not controlled. |
disabled | bool | - | If true , the component is disabled. |
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. |
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: React.ChangeEvent) => void |
required | bool | false | If true , the input element is required. |
size | ‘medium’ | ‘small’ | string | ‘medium’ | The size of the component. 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. |
value | any | - | The value of the component. The DOM API casts this to a string. |
The ref
is forwarded to the root element.
While not explicitly documented above, the props of the IconButton component are also available in Switch.
Class name | Rule name | Description |
---|---|---|
.Mui-checked | - | State class applied to the internal SwitchBase component’s checked class. |
.Mui-disabled | - | State class applied to the internal SwitchBase component’s disabled class. |
.MuiSwitch-colorPrimary | colorPrimary | Styles applied to the internal SwitchBase component’s root element if color="primary" . |
.MuiSwitch-colorSecondary | colorSecondary | Styles applied to the internal SwitchBase component’s root element if color="secondary" . |
.MuiSwitch-edgeEnd | edgeEnd | Styles applied to the root element if edge="end" . |
.MuiSwitch-edgeStart | edgeStart | Styles applied to the root element if edge="start" . |
.MuiSwitch-input | input | Styles applied to the internal SwitchBase component’s input element. |
.MuiSwitch-root | root | Styles applied to the root element. |
.MuiSwitch-sizeMedium | sizeMedium | Styles applied to the root element if size="medium" . |
.MuiSwitch-sizeSmall | sizeSmall | Styles applied to the root element if size="small" . |
.MuiSwitch-switchBase | switchBase | Styles applied to the internal SwitchBase component’s root class. |
.MuiSwitch-thumb | thumb | Styles used to create the thumb passed to the internal SwitchBase component icon prop. |
.MuiSwitch-track | track | Styles applied to the track element. |
You can override the style of the component using one of these customization options:
styleOverrides
property in a custom theme.If you did not find the information in this page, consider having a look at the implementation of the component for more detail.