SwitchUnstyled API

API documentation for the React SwitchUnstyled component. Learn about the available props and the CSS API.

Import

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

The foundation for building custom-styled switches.

Props of the native component are also available.

Name	Type	Default	Description
checked	bool	false	If `true`, the component is checked.
className	string		Class name applied to the root element.
component	elementType		The component used for the Root slot. Either a string to use a HTML element or a component. This is equivalent to `components.Root`. If both are provided, the `component` is used.
components	{ Input?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType \| null }	{}	The components used for each slot inside the Switch. Either a string to use a HTML element or a component.
componentsProps	{ input?: object, root?: object, thumb?: object, track?: object }	{}	The props used for each slot inside the Switch.
defaultChecked	bool	false	The default checked state. Use when the component is not controlled.
disabled	bool	false	If `true`, the component is disabled.
onChange	func		Callback fired when the state is changed. Signature: `function(event: React.ChangeEvent<HTMLInputElement>) => void` event: The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). You can pull out the new checked state by accessing `event.target.checked` (boolean).
readOnly	bool	false	If `true`, the component is read only.
required	bool	false	If `true`, the `input` element is required.

The ref is forwarded to the root element.