Switch

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

useSwitch API

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

Name	Type	Default	Description
checked	boolean	-	If `true`, the switch is checked.
defaultChecked	boolean	-	The default checked state. Use when the component is not controlled.
disabled	boolean	false	If `true`, the component is disabled and can't be interacted with.
inputRef	React.Ref<HTMLInputElement>	-	Ref to the underlying input element.
name	string	-	Name of the underlying input element.
onChange	React.ChangeEventHandler<HTMLInputElement>	-	Callback fired when the state is changed.
readOnly	boolean	false	If `true`, the component is read-only. Functionally, this is equivalent to being disabled, but the assistive technologies will announce this differently.
required	boolean	false	If `true`, the switch must be checked for the browser validation to pass.

Name	Type	Default	Description
checked	boolean	-	If `true`, the component will be checked.
getButtonProps	(externalProps?: React.ComponentPropsWithRef<'button'>) => React.ComponentPropsWithRef<'button'>	-	Resolver for the button element's props.
getInputProps	(externalProps?: React.ComponentPropsWithRef<'input'>) => React.ComponentPropsWithRef<'input'>	-	Resolver for the input element's props.