{
  "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file",
  "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json",
  "apiVersion": "1.0.0",
  "name": "CheckboxButton",
  "description": "Initializes checkbox button",
  "structure": {
    "name": "root",
    "restrict": [
      "label",
      "div"
    ],
    "description": "Checkbox button container. Renders as the <label> when the input is icon-styled inline, or as a wrapper <div> when paired with a faux-styled <label>.",
    "children": [
      {
        "name": "input",
        "restrict": [
          "input"
        ],
        "description": "Visually hidden checkbox input element; receives focus and carries the checked/disabled state.",
        "attributes": {
          "static": {
            "type": "checkbox",
            "class": "slds-assistive-text"
          },
          "bound": {
            "id": {
              "prop": "inputId",
              "required": true
            },
            "name": {
              "prop": "name"
            },
            "value": {
              "prop": "value"
            },
            "checked": {
              "prop": "checked"
            },
            "disabled": {
              "prop": "disabled"
            }
          }
        }
      },
      {
        "name": "iconContainer",
        "restrict": [
          "span"
        ],
        "description": "Icon affordance shown when the root is a <label> (icon-button rendering). Contains the utility icon glyph and the assistive-text label.",
        "renderWhen": {
          "prop": "style",
          "eq": "iconButton"
        },
        "attributes": {
          "bound": {
            "title": {
              "prop": "iconTitle"
            }
          },
          "static": {
            "class": "slds-icon_container slds-current-color"
          }
        },
        "children": [
          {
            "name": "icon",
            "description": "Inline SVG referencing a utility sprite glyph.",
            "component": "PrimitiveIcon",
            "attributes": {
              "static": {
                "class": "slds-icon slds-icon_x-small"
              }
            },
            "children": [
              {
                "name": "iconUse",
                "attributes": {
                  "static": {}
                }
              }
            ]
          },
          {
            "name": "iconAssistiveText",
            "restrict": [
              "span"
            ],
            "description": "Visually-hidden label announcing the action for screen readers.",
            "slot": {
              "name": "assistiveText",
              "required": true
            },
            "attributes": {
              "static": {
                "class": "slds-assistive-text"
              }
            }
          }
        ],
        "variants": [
          {
            "name": "utilityIcon",
            "description": "Utility sprite glyph class applied to the icon container; mirrors the glyph referenced by the inner <svg><use>.",
            "options": [
              {
                "value": "add",
                "class": "slds-icon-utility-add"
              },
              {
                "value": "check",
                "class": "slds-icon-utility-check"
              },
              {
                "value": "recycle_bin_empty",
                "class": "slds-icon-utility-recycle_bin_empty"
              },
              {
                "value": "recycle_bin_full",
                "class": "slds-icon-utility-recycle_bin_full"
              }
            ]
          }
        ]
      },
      {
        "name": "fauxLabel",
        "restrict": [
          "label"
        ],
        "description": "Creates a custom styled checkbox",
        "renderWhen": {
          "prop": "style",
          "eq": "addButton"
        },
        "attributes": {
          "bound": {
            "for": {
              "prop": "inputId"
            }
          },
          "static": {
            "class": "slds-checkbox_faux"
          }
        },
        "children": [
          {
            "name": "fauxAssistiveText",
            "restrict": [
              "span"
            ],
            "description": "Visually-hidden label announcing the action for screen readers (add-button rendering).",
            "slot": {
              "name": "assistiveText",
              "required": true
            },
            "attributes": {
              "static": {
                "class": "slds-assistive-text"
              }
            }
          }
        ]
      }
    ],
    "variants": [
      {
        "name": "style",
        "description": "Rendering style: icon-driven toggle (root is <label class='slds-checkbox-button'>) or add-button affordance (root is <div class='slds-checkbox_add-button'>).",
        "default": "iconButton",
        "options": [
          {
            "value": "iconButton",
            "class": "slds-checkbox-button"
          },
          {
            "value": "addButton",
            "class": "slds-checkbox_add-button"
          }
        ]
      }
    ]
  },
  "states": [
    {
      "name": "checked",
      "type": "boolean",
      "description": "Whether the checkbox is checked"
    },
    {
      "name": "disabled",
      "type": "boolean",
      "aria": "aria-disabled",
      "description": "Whether the checkbox button is disabled"
    },
    {
      "name": "required",
      "type": "boolean",
      "aria": "aria-required",
      "description": "Whether selection is required"
    }
  ],
  "composition": {
    "requiredComponentParent": "CheckboxButtonGroup"
  },
  "accessibility": {
    "requirements": [
      {
        "id": "label-association",
        "description": "Label must be associated with input via for/id."
      },
      {
        "id": "assistive-text",
        "description": "A visually-hidden assistive-text node must describe the action since the visible surface is icon-only."
      }
    ]
  },
  "componentRefs": {
    "PrimitiveIcon": {
      "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.",
      "props": {
        "iconName": {
          "type": "string",
          "required": true,
          "description": "Sprite reference for the icon glyph"
        }
      }
    }
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2017-03-01",
      "genReady": false,
      "lbc": "lightning-input"
    }
  },
  "cssSource": "./checkboxButton.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "stateClasses": [
    {
      "state": "checked",
      "class": "slds-checkbox-button_is-checked"
    },
    {
      "state": "disabled",
      "class": "slds-checkbox-button_is-disabled"
    }
  ]
}