Skip to content

Unstyled Switch

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

Introduction

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

Component

Usage

After installation, you can start building with this component using the following basic elements:

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

export default function MyApp() {
  return <SwitchUnstyled />;
}

Basics

The following demo shows how to assign styles and props to the Unstyled Switch component:

Press Enter to start editing

Anatomy

The Unstyled Switch component is composed of a root <span> that houses three interior slots—a track, a thumb, and an input:

<span class="MuiSwitch-root">
  <span class="MuiSwitch-track"></span>
  <span class="MuiSwitch-thumb"></span>
  <input type="checkbox" class="MuiSwitch-input" />
</span>

Slot props

Use the component prop to override the root slot with a custom element:

<SwitchUnstyled component="div" />

Use the slots prop to override any interior slots in addition to the root:

<SwitchUnstyled slots={{ root: 'div', track: 'div' }} />

Use the slotProps prop to pass custom props to internal slots. The following code snippet applies a CSS class called my-thumb to the thumb slot:

<SwitchUnstyled slotProps={{ thumb: { className: 'my-thumb' } }} />

Hook

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

The useSwitch hook lets you apply the functionality of a switch to a fully custom component. It returns props to be placed on the custom component, along with fields representing the component's internal state.

Hooks do not support slot props, but they do support customization props.

Basic example

Press Enter to start editing

Customized look and feel

Press Enter to start editing

Accessibility

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

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.