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 component is checked.
defaultChecked	boolean	-	The default checked state. Use when the component is not controlled.
disabled	boolean	-	If `true`, the component is disabled.
onBlur	React.FocusEventHandler	-
onChange	React.ChangeEventHandler<HTMLInputElement>	-	Callback fired when the state is changed.
onFocus	React.FocusEventHandler	-
onFocusVisible	React.FocusEventHandler	-
readOnly	boolean	-	If `true`, the component is read only.
required	boolean	-	If `true`, the `input` element is required.

Name	Type	Default	Description
checked	boolean	-	If `true`, the component will be checked.
disabled	boolean	-	If `true`, the component will be disabled.
focusVisible	boolean	-	If `true`, it indicates that the component is being focused using keyboard.
getInputProps	(externalProps?: React.HTMLAttributes<HTMLInputElement>) => UseSwitchInputSlotProps	-	Resolver for the input slot's props.
inputRef	React.RefCallback<HTMLInputElement> \| null	-	Ref to the input slot's DOM node.
readOnly	boolean	-	If `true`, the component will be read only.