Switch

MD3 switch for turning a single setting on or off. Built on a native <input type="checkbox" role="switch">, so labels, keyboard, and form submission behave natively.

States

<Switch aria-label="Wi-Fi" />
<Switch defaultSelected aria-label="Bluetooth" />

Controlled

selected + onChange make the switch controlled; onChange receives the native event and the next selected state. Use defaultSelected for an uncontrolled switch.

Airplane mode (off)

const [selected, setSelected] = useState(false)

<label>
  <Switch selected={selected} onChange={(event, next) => setSelected(next)} />
  Airplane mode
</label>

Icons

selectedIcon is shown in the handle while the switch is on. Set icons to show an icon in both states, with unselectedIcon for the off state. Icons are any ReactNode — see Icons.

<Switch icons selectedIcon={<Check />} unselectedIcon={<Close />} aria-label="Notifications" />

Accessibility

• The native input carries role="switch": Tab focuses it and Space toggles it; the on state is exposed as checked.
• Provide an accessible name: wrap the switch in a <label> with visible text, or pass aria-label.
• The touch target is 48dp. ref points at the root element; inputRef reaches the native input.

Props

Prop	Type	Default	Description
defaultSelected	boolean	false	Uncontrolled initial selected state.
icons	boolean	false	Show icons on both states.
inputRef	Ref<HTMLInputElement>	—	Ref to the native `<input>` element (the forwarded `ref` points at the root).
onChange	((event: ChangeEvent<HTMLInputElement, Element>, selected: boolean) => void)	—	Fires with the native event and the next selected state on toggle.
selected	boolean	—	Controlled selected (on) state.
selectedIcon	ReactNode	—	Icon shown when selected.
unselectedIcon	ReactNode	—	Icon shown when unselected.