Unstyled switch

The SwitchUnstyled component provides users with a switch for toggling between two mutually exclusive states.

Switches are UI elements that let users choose between two states—most commonly on/off.

SwitchUnstyled

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

Basic switch

The SwitchUnstyled component is composed of a root <span> that houses three interior elements—a track, a thumb, and an input—and it assigns CSS classes for styling each piece:

<span class="MuiSwitch-root Mui-checked">
  <span class="MuiSwitch-track"></span>
  <span class="MuiSwitch-thumb"></span>
  <input type="checkbox" aria-label="Demo switch" class="MuiSwitch-input" checked />
</span>

You can set the props for these interior components using the componentsProps object.

You can also override them entirely with the components prop, to replace them with other HTML elements or custom components.

The following demo shows how to assign styles and props to the interior elements of the SwitchUnstyled component:

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

Accessibility

To make the SwitchUnstyled component accessible, you should ensure that the corresponding labels reflect the current state of the switch.

The useSwitch hook

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

The useSwitch hook lets you use the functionality of SwitchUnstyled in other components.

It accepts the same options as the SwitchUnstyled component, aside from the component, components, and componentsProps props.

Basic example

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

Customized look and feel

<MUISwitch defaultChecked />

API

<SwitchUnstyled />