Skip to content
+

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

NameTypeDefaultDescription
checkedboolean

If true, the component is checked.

defaultCheckedboolean

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

disabledboolean

If true, the component is disabled.

onBlurReact.FocusEventHandler
onChangeReact.ChangeEventHandler<HTMLInputElement>

Callback fired when the state is changed.

onFocusReact.FocusEventHandler
onFocusVisibleReact.FocusEventHandler
readOnlyboolean

If true, the component is read only.

requiredboolean

If true, the input element is required.

Return value

NameTypeDefaultDescription
checkedboolean

If true, the component will be checked.

disabledboolean

If true, the component will be disabled.

focusVisibleboolean

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.

inputRefReact.RefCallback<HTMLInputElement> | null

Ref to the input slot's DOM node.

readOnlyboolean

If true, the component will be read only.