{ "props": { "checked": { "type": { "name": "bool" } }, "checkedIcon": { "type": { "name": "node" }, "default": "" }, "className": { "type": { "name": "string" } }, "color": { "type": { "name": "union", "description": "'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string" }, "default": "'neutral'", "additionalInfo": { "joy-color": true } }, "component": { "type": { "name": "elementType" } }, "defaultChecked": { "type": { "name": "bool" } }, "disabled": { "type": { "name": "bool" } }, "disableIcon": { "type": { "name": "bool" }, "default": "false" }, "indeterminate": { "type": { "name": "bool" }, "default": "false" }, "indeterminateIcon": { "type": { "name": "node" }, "default": "" }, "label": { "type": { "name": "node" } }, "name": { "type": { "name": "string" } }, "onChange": { "type": { "name": "func" }, "signature": { "type": "function(event: React.ChangeEvent) => void", "describedArgs": ["event"] } }, "overlay": { "type": { "name": "bool" }, "default": "false" }, "readOnly": { "type": { "name": "bool" } }, "required": { "type": { "name": "bool" } }, "size": { "type": { "name": "enum", "description": "'sm'
| 'md'
| 'lg'" }, "default": "'md'", "additionalInfo": { "joy-size": true } }, "slotProps": { "type": { "name": "shape", "description": "{ action?: func
| object, checkbox?: func
| object, input?: func
| object, label?: func
| object, root?: func
| object }" }, "default": "{}" }, "slots": { "type": { "name": "shape", "description": "{ action?: elementType, checkbox?: elementType, input?: elementType, label?: elementType, root?: elementType }" }, "default": "{}", "additionalInfo": { "slotsApi": true } }, "sx": { "type": { "name": "union", "description": "Array<func
| object
| bool>
| func
| object" }, "additionalInfo": { "sx": true } }, "uncheckedIcon": { "type": { "name": "node" } }, "value": { "type": { "name": "union", "description": "Array<string>
| number
| string" } }, "variant": { "type": { "name": "enum", "description": "'outlined'
| 'plain'
| 'soft'
| 'solid'" }, "default": "'solid'", "additionalInfo": { "joy-variant": true } } }, "name": "Checkbox", "imports": ["import Checkbox from '@mui/joy/Checkbox';", "import { Checkbox } from '@mui/joy';"], "slots": [ { "name": "root", "description": "The component that renders the root.", "default": "'span'", "class": "MuiCheckbox-root" }, { "name": "checkbox", "description": "The component that renders the checkbox.", "default": "'span'", "class": "MuiCheckbox-checkbox" }, { "name": "action", "description": "The component that renders the action.", "default": "'span'", "class": "MuiCheckbox-action" }, { "name": "input", "description": "The component that renders the input.", "default": "'input'", "class": "MuiCheckbox-input" }, { "name": "label", "description": "The component that renders the label.", "default": "'label'", "class": "MuiCheckbox-label" } ], "classes": [ { "key": "checked", "className": "Mui-checked", "description": "State class applied to the input component's `checked` class.", "isGlobal": true }, { "key": "colorContext", "className": "MuiCheckbox-colorContext", "description": "Class name applied to the root element when color inversion is triggered.", "isGlobal": false }, { "key": "colorDanger", "className": "MuiCheckbox-colorDanger", "description": "Class name applied to the root element if `color=\"danger\"`.", "isGlobal": false }, { "key": "colorNeutral", "className": "MuiCheckbox-colorNeutral", "description": "Class name applied to the root element if `color=\"neutral\"`.", "isGlobal": false }, { "key": "colorPrimary", "className": "MuiCheckbox-colorPrimary", "description": "Class name applied to the root element if `color=\"primary\"`.", "isGlobal": false }, { "key": "colorSuccess", "className": "MuiCheckbox-colorSuccess", "description": "Class name applied to the root element if `color=\"success\"`.", "isGlobal": false }, { "key": "colorWarning", "className": "MuiCheckbox-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 input component's disabled class.", "isGlobal": true }, { "key": "focusVisible", "className": "Mui-focusVisible", "description": "Class name applied to the root element if the switch has visible focus", "isGlobal": true }, { "key": "indeterminate", "className": "MuiCheckbox-indeterminate", "description": "State class applied to the root element if `indeterminate={true}`.", "isGlobal": false }, { "key": "sizeLg", "className": "MuiCheckbox-sizeLg", "description": "Class name applied to the root element if `size=\"lg\"`.", "isGlobal": false }, { "key": "sizeMd", "className": "MuiCheckbox-sizeMd", "description": "Class name applied to the root element if `size=\"md\"`.", "isGlobal": false }, { "key": "sizeSm", "className": "MuiCheckbox-sizeSm", "description": "Class name applied to the root element if `size=\"sm\"`.", "isGlobal": false }, { "key": "variantOutlined", "className": "MuiCheckbox-variantOutlined", "description": "Class name applied to the root element if `variant=\"outlined\"`.", "isGlobal": false }, { "key": "variantSoft", "className": "MuiCheckbox-variantSoft", "description": "Class name applied to the root element if `variant=\"soft\"`.", "isGlobal": false }, { "key": "variantSolid", "className": "MuiCheckbox-variantSolid", "description": "Class name applied to the root element if `variant=\"solid\"`.", "isGlobal": false } ], "spread": false, "themeDefaultProps": true, "muiName": "JoyCheckbox", "forwardsRefTo": "HTMLSpanElement", "filename": "/packages/mui-joy/src/Checkbox/Checkbox.tsx", "inheritance": null, "demos": "", "cssComponent": false }