Skip to content
+

Switch

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

  • Feedback
  • Bundle size
  • WAI-ARIA
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



Edit this page

Was this page helpful?


SliderToggle Button Group

Blog

Store