Skip to main content
Switches toggle the state of a single setting on or off.

​
Import

import Switch from '@mui/material/Switch';

​
Basic Usage

import Switch from '@mui/material/Switch';

const label = { inputProps: { 'aria-label': 'Switch demo' } };

export default function BasicSwitches() {
  return (
    <div>
      <Switch {...label} defaultChecked />
      <Switch {...label} />
      <Switch {...label} disabled defaultChecked />
      <Switch {...label} disabled />
    </div>
  );
}

​
Props

​
checked
boolean
If true, the component is checked.
​
defaultChecked
boolean
The default checked state. Use when the component is not controlled.
​
color
'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default'
default:"'primary'"
The color of the component. Supports both default and custom theme colors.
​
size
'small' | 'medium'
default:"'medium'"
The size of the component. small is equivalent to the dense switch styling.
​
disabled
boolean
If true, the component is disabled.
​
checkedIcon
ReactNode
The icon to display when the component is checked.
​
icon
ReactNode
The icon to display when the component is unchecked.
​
value
unknown
The value of the component. The DOM API casts this to a string. The browser uses “on” as the default value.
​
sx
SxProps<Theme>
The system prop that allows defining system overrides as well as additional CSS styles.

​
API Reference

Build docs developers (and LLMs) love

Get started for freeTalk to us