{
  "componentDescription": "",
  "propDescriptions": {
    "checked": { "description": "If <code>true</code>, the component is checked." },
    "checkedIcon": { "description": "The icon to display when the component is checked." },
    "className": { "description": "Class name applied to the root element." },
    "color": {
      "description": "The color of the component. It supports those theme colors that make sense for this component."
    },
    "component": {
      "description": "The component used for the root node. Either a string to use a HTML element or a component."
    },
    "defaultChecked": {
      "description": "The default checked state. Use when the component is not controlled."
    },
    "disabled": { "description": "If <code>true</code>, the component is disabled." },
    "disableIcon": {
      "description": "If <code>true</code>, the checked icon is removed and the selected variant is applied on the <code>action</code> element instead."
    },
    "indeterminate": {
      "description": "If <code>true</code>, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a <code>data-indeterminate</code> attribute on the <code>input</code>."
    },
    "indeterminateIcon": {
      "description": "The icon to display when the component is indeterminate."
    },
    "label": { "description": "The label element next to the checkbox." },
    "name": { "description": "The <code>name</code> attribute of the input." },
    "onChange": {
      "description": "Callback fired when the state is changed.",
      "typeDescriptions": {
        "event": {
          "name": "event",
          "description": "The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string). You can pull out the new checked state by accessing <code>event.target.checked</code> (boolean)."
        }
      }
    },
    "overlay": {
      "description": "If <code>true</code>, the root element&#39;s position is set to initial which allows the action area to fill the nearest positioned parent. This prop is useful for composing Checkbox with ListItem component."
    },
    "readOnly": { "description": "If <code>true</code>, the component is read only." },
    "required": {
      "description": "If <code>true</code>, the <code>input</code> element is required."
    },
    "size": { "description": "The size of the component." },
    "slotProps": { "description": "The props used for each slot inside." },
    "slots": { "description": "The components used for each slot inside." },
    "sx": {
      "description": "The system prop that allows defining system overrides as well as additional CSS styles."
    },
    "uncheckedIcon": { "description": "The icon when <code>checked</code> is false." },
    "value": {
      "description": "The value of the component. The DOM API casts this to a string. The browser uses &quot;on&quot; as the default value."
    },
    "variant": {
      "description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
    }
  },
  "classDescriptions": {
    "checked": {
      "description": "State class applied to {{nodeName}}.",
      "nodeName": "the input component&#39;s <code>checked</code> class"
    },
    "colorContext": {
      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "color inversion is triggered"
    },
    "colorDanger": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"danger\"</code>"
    },
    "colorNeutral": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"neutral\"</code>"
    },
    "colorPrimary": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"primary\"</code>"
    },
    "colorSuccess": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"success\"</code>"
    },
    "colorWarning": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"warning\"</code>"
    },
    "disabled": {
      "description": "State class applied to {{nodeName}}.",
      "nodeName": "the input component&#39;s disabled class"
    },
    "focusVisible": {
      "description": "Class name applied to the root element if the switch has visible focus"
    },
    "indeterminate": {
      "description": "State class applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>indeterminate={true}</code>"
    },
    "sizeLg": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"lg\"</code>"
    },
    "sizeMd": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"md\"</code>"
    },
    "sizeSm": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"sm\"</code>"
    },
    "variantOutlined": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"outlined\"</code>"
    },
    "variantSoft": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"soft\"</code>"
    },
    "variantSolid": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"solid\"</code>"
    }
  },
  "slotDescriptions": {
    "action": "The component that renders the action.",
    "checkbox": "The component that renders the checkbox.",
    "input": "The component that renders the input.",
    "label": "The component that renders the label.",
    "root": "The component that renders the root."
  }
}