{ "props": { "checked": { "type": { "name": "bool" } }, "color": { "type": { "name": "union", "description": "'danger'
| 'primary'
| 'success'
| 'warning'
| string" }, "default": "'neutral'", "additionalInfo": { "joy-color": true } }, "component": { "type": { "name": "elementType" } }, "defaultChecked": { "type": { "name": "bool" } }, "disabled": { "type": { "name": "bool" } }, "endDecorator": { "type": { "name": "union", "description": "node
| func" } }, "onChange": { "type": { "name": "func" }, "signature": { "type": "function(event: React.ChangeEvent) => void", "describedArgs": ["event"] } }, "readOnly": { "type": { "name": "bool" } }, "required": { "type": { "name": "bool" } }, "size": { "type": { "name": "union", "description": "'sm'
| 'md'
| 'lg'
| string" }, "default": "'md'", "additionalInfo": { "joy-size": true } }, "slotProps": { "type": { "name": "shape", "description": "{ action?: func
| object, endDecorator?: func
| object, input?: func
| object, root?: func
| object, startDecorator?: func
| object, thumb?: func
| object, track?: func
| object }" }, "default": "{}" }, "slots": { "type": { "name": "shape", "description": "{ action?: elementType, endDecorator?: elementType, input?: elementType, root?: elementType, startDecorator?: elementType, thumb?: elementType, track?: elementType }" }, "default": "{}", "additionalInfo": { "slotsApi": true } }, "startDecorator": { "type": { "name": "union", "description": "node
| func" } }, "sx": { "type": { "name": "union", "description": "Array<func
| object
| bool>
| func
| object" }, "additionalInfo": { "sx": true } }, "variant": { "type": { "name": "union", "description": "'outlined'
| 'plain'
| 'soft'
| 'solid'
| string" }, "default": "'solid'", "additionalInfo": { "joy-variant": true } } }, "name": "Switch", "imports": ["import Switch from '@mui/joy/Switch';", "import { Switch } from '@mui/joy';"], "slots": [ { "name": "root", "description": "The component that renders the root.", "default": "'div'", "class": "MuiSwitch-root" }, { "name": "thumb", "description": "The component that renders the thumb.", "default": "'span'", "class": "MuiSwitch-thumb" }, { "name": "action", "description": "The component that renders the action.", "default": "'div'", "class": "MuiSwitch-action" }, { "name": "input", "description": "The component that renders the input.", "default": "'input'", "class": "MuiSwitch-input" }, { "name": "track", "description": "The component that renders the track.", "default": "'span'", "class": "MuiSwitch-track" }, { "name": "startDecorator", "description": "The component that renders the start decorator.", "default": "'span'", "class": "MuiSwitch-startDecorator" }, { "name": "endDecorator", "description": "The component that renders the end decorator.", "default": "'span'", "class": "MuiSwitch-endDecorator" } ], "classes": [ { "key": "checked", "className": "Mui-checked", "description": "State class applied to the root `checked` class.", "isGlobal": true }, { "key": "colorContext", "className": "MuiSwitch-colorContext", "description": "Class name applied to the root element when color inversion is triggered.", "isGlobal": false }, { "key": "colorDanger", "className": "MuiSwitch-colorDanger", "description": "Class name applied to the root element if `color=\"danger\"`.", "isGlobal": false }, { "key": "colorPrimary", "className": "MuiSwitch-colorPrimary", "description": "Class name applied to the root element if `color=\"primary\"`.", "isGlobal": false }, { "key": "colorSuccess", "className": "MuiSwitch-colorSuccess", "description": "Class name applied to the root element if `color=\"success\"`.", "isGlobal": false }, { "key": "colorWarning", "className": "MuiSwitch-colorWarning", "description": "Class name applied to the root element if `color=\"warning\"`.", "isGlobal": false }, { "key": "disabled", "className": "Mui-disabled", "description": "State class applied to the root disabled class.", "isGlobal": true }, { "key": "focusVisible", "className": "Mui-focusVisible", "description": "State class applied to the root element if the switch has visible focus", "isGlobal": true }, { "key": "readOnly", "className": "Mui-readOnly", "description": "Class name applied to the root element if the switch is read-only", "isGlobal": true }, { "key": "sizeLg", "className": "MuiSwitch-sizeLg", "description": "Class name applied to the root element if `size=\"lg\"`.", "isGlobal": false }, { "key": "sizeMd", "className": "MuiSwitch-sizeMd", "description": "Class name applied to the root element if `size=\"md\"`.", "isGlobal": false }, { "key": "sizeSm", "className": "MuiSwitch-sizeSm", "description": "Class name applied to the root element if `size=\"sm\"`.", "isGlobal": false }, { "key": "variantOutlined", "className": "MuiSwitch-variantOutlined", "description": "Class name applied to the root element if `variant=\"outlined\"`.", "isGlobal": false }, { "key": "variantSoft", "className": "MuiSwitch-variantSoft", "description": "Class name applied to the root element if `variant=\"soft\"`.", "isGlobal": false }, { "key": "variantSolid", "className": "MuiSwitch-variantSolid", "description": "Class name applied to the root element if `variant=\"solid\"`.", "isGlobal": false } ], "spread": true, "themeDefaultProps": true, "muiName": "JoySwitch", "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-joy/src/Switch/Switch.tsx", "inheritance": null, "demos": "", "cssComponent": false }