Skip to content

Unstyled 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';
You can 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.
focusVisiblebooleanfalse
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.
readOnlyboolean
If true, the component will be read only.