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	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	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.