Switch

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

Switch API

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

Props of the native component are also available.

Name	Type	Default	Description
checked	bool	-	If `true`, the switch is checked.
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
defaultChecked	bool	-	The default checked state. Use when the component is not controlled.
disabled	bool	false	If `true`, the component is disabled and can't be interacted with.
inputRef	ref	-	Ref to the underlying input element.
name	string	-	Name of the underlying input element.
onChange	func	-	Callback fired when the state is changed. Signature:`function(event: React.ChangeEvent) => 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. Functionally, this is equivalent to being disabled, but the assistive technologies will announce this differently.
render	func	-	A function to customize rendering of the component.
required	bool	false	If `true`, the switch must be checked for the browser validation to pass.

The ref is forwarded to the root element.

You can use Switch to change the default props of this component with the theme.

import { SwitchThumb } from '@mui/base/Switch';
// or
import { SwitchThumb } from '@mui/base';

Props of the native component are also available.

Name	Type	Default	Description
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
render	func	-	A function to customize rendering of the component.

The ref is forwarded to the root element.

You can use SwitchThumb to change the default props of this component with the theme.