react-test/docs/translations/api-docs/checkbox/checkbox.json

{
  "componentDescription": "",
  "propDescriptions": {
    "checked": { "description": "If <code>true</code>, the component is checked." },
    "checkedIcon": { "description": "The icon to display when the component is checked." },
    "classes": { "description": "Override or extend the styles applied to the component." },
    "color": {
      "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#custom-colors\">palette customization guide</a>."
    },
    "defaultChecked": {
      "description": "The default checked state. Use when the component is not controlled."
    },
    "disabled": { "description": "If <code>true</code>, the component is disabled." },
    "disableRipple": { "description": "If <code>true</code>, the ripple effect is disabled." },
    "icon": { "description": "The icon to display when the component is unchecked." },
    "id": { "description": "The id of the <code>input</code> element." },
    "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."
    },
    "inputProps": {
      "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes\">Attributes</a> applied to the <code>input</code> element."
    },
    "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 checked state by accessing <code>event.target.checked</code> (boolean)."
        }
      }
    },
    "required": {
      "description": "If <code>true</code>, the <code>input</code> element is required."
    },
    "size": {
      "description": "The size of the component. <code>small</code> is equivalent to the dense checkbox styling."
    },
    "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."
    },
    "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."
    }
  },
  "classDescriptions": {
    "checked": {
      "description": "State class applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>checked={true}</code>"
    },
    "colorPrimary": {
      "description": "State class applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"primary\"</code>"
    },
    "colorSecondary": {
      "description": "State class applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"secondary\"</code>"
    },
    "disabled": {
      "description": "State class applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>disabled={true}</code>"
    },
    "indeterminate": {
      "description": "State class applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>indeterminate={true}</code>"
    },
    "sizeMedium": {
      "description": "State class applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"medium\"</code>"
    },
    "sizeSmall": {
      "description": "State class applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"small\"</code>"
    }
  },
  "slotDescriptions": {
    "input": "The component that renders the input slot.",
    "root": "The component that renders the root slot."
  }
}