{
"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
}