SwitchUnstyled API
API reference docs for the React SwitchUnstyled component. Learn about the props, CSS, and other APIs of this exported module.
Demos
For examples and details on the usage of this React component, visit the component demo pages:
Import
import SwitchUnstyled from '@mui/base/SwitchUnstyled';
// or
import { SwitchUnstyled } from '@mui/base';
The foundation for building custom-styled switches.
Props
Props of the native component are also available.
Name | Type | Default | Description |
---|---|---|---|
checked | bool | false | If true , the component is checked. |
component | elementType | The component used for the root node. Either a string to use a HTML element or a component. | |
defaultChecked | bool | false | The default checked state. Use when the component is not controlled. |
disabled | bool | false | If true , the component is disabled. |
onChange | func | Callback fired when the state is changed. Signature: function(event: React.ChangeEvent<HTMLInputElement>) => void event: The event source of the callback. You can pull out the new value by accessing event.target.value (string). You can pull out the new checked state by accessing event.target.checked (boolean). | |
readOnly | bool | false | If true , the component is read only. |
required | bool | false | If true , the input element is required. |
slotProps | { input?: func | object, root?: func | object, thumb?: func | object, track?: func | object } | {} | The props used for each slot inside the Switch. |
slots | { input?: elementType, root?: elementType, thumb?: elementType, track?: elementType | null } | {} | The components used for each slot inside the Switch. Either a string to use a HTML element or a component. |
The
ref
is forwarded to the root element.