Switch

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

useSwitch API

Import

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

Learn about the difference by reading this guide on minimizing bundle size.

Parameters

checked

If true, the component is checked.

Type:

boolean

defaultChecked

The default checked state. Use when the component is not controlled.

Type:

boolean

disabled

If true, the component is disabled.

Type:

boolean

onBlur

Type:

React.FocusEventHandler

onChange

Callback fired when the state is changed.

Type:

React.ChangeEventHandler<HTMLInputElement>

onFocus

Type:

React.FocusEventHandler

onFocusVisible

Type:

React.FocusEventHandler

readOnly

If true, the component is read only.

Type:

boolean

required

If true, the input element is required.

Type:

boolean

Return value

checked

If true, the component will be checked.

Type:

boolean

disabled

If true, the component will be disabled.

Type:

boolean

focusVisible

If true, it indicates that the component is being focused using keyboard.

Type:

boolean

getInputProps

Resolver for the input slot's props.

Type:

(externalProps?: React.HTMLAttributes<HTMLInputElement>) => UseSwitchInputSlotProps

inputRef

Ref to the input slot's DOM node.

Type:

React.RefCallback<HTMLInputElement> | null

readOnly

If true, the component will be read only.

Type:

boolean