Skip to content
+

Switch

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

Component demosComponents APIHooks API

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