useSwitch API
Demos
For examples and details on the usage of this React hook, visit the demo pages:
Import
import useSwitch from '@mui/base/useSwitch';The basic building block for creating custom switches.
Parameters
| Name | Type | Default | 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 | Default | Description |
|---|---|---|---|
| checked | boolean | If true, the component will be checked. | |
| disabled | boolean | If true, the component will be disabled. | |
| focusVisible | boolean | false | 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. | |
| readOnly | boolean | If true, the component will be read only. |