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';Parameters
| Name | Type | Description |
|---|---|---|
| checked | boolean | If true, the component is checked. |
| defaultChecked | boolean | The default checked state. Use when the component is not controlled. |
| disabled | boolean | If true, the component is disabled. |
| onBlur | React.FocusEventHandler | |
| onChange | React.ChangeEventHandler<HTMLInputElement> | Callback fired when the state is changed. |
| onFocus | React.FocusEventHandler | |
| onFocusVisible | React.FocusEventHandler | |
| readOnly | boolean | If true, the component is read only. |
| required | boolean | If true, the input element is required. |
Return value
| Name | Type | Description |
|---|---|---|
| checked | boolean | If true, the component will be checked. |
| disabled | boolean | If true, the component will be disabled. |
| focusVisible | boolean | 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. |
| inputRef | React.RefCallback<HTMLInputElement> | null | Ref to the input slot's DOM node. |
| readOnly | boolean | If true, the component will be read only. |