{
  "name": "checkbox",
  "displayName": "Checkbox",
  "type": "native",
  "isCustomElement": false,
  "tag": null,
  "nativeTag": "input",
  "selector": ".l-checkbox",
  "subItemOf": null,
  "summary": "Checkboxes let users select one or more options, or toggle a single setting on or off.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": "luxen-ui/css/checkbox",
    "js": null
  },
  "properties": [],
  "attributes": [
    {
      "name": "checked",
      "data": false,
      "values": [],
      "description": "Whether the checkbox is checked."
    },
    {
      "name": "disabled",
      "data": false,
      "values": [],
      "description": "Disables the checkbox."
    },
    {
      "name": "required",
      "data": false,
      "values": [],
      "description": "Marks the checkbox as required for form submission."
    },
    {
      "name": "indeterminate",
      "data": false,
      "values": [],
      "description": "Indeterminate state (DOM property `el.indeterminate = true`; renders a dash). Typically the parent of a group."
    },
    {
      "name": "aria-invalid",
      "data": false,
      "values": [],
      "description": "Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically."
    }
  ],
  "events": [],
  "methods": [],
  "slots": [],
  "cssClasses": [
    {
      "name": ".l-checkbox",
      "description": "Base checkbox style, applied to `<input type=\"checkbox\">`. Inside `l-form-field` a bare checkbox is auto-styled, so the class is optional there."
    }
  ],
  "cssParts": [],
  "cssProperties": [
    {
      "name": "--size",
      "default": "1.25em",
      "description": "Box size."
    },
    {
      "name": "--accent",
      "default": "var(--l-form-control-activated-color)",
      "description": "Checked/indeterminate fill color."
    },
    {
      "name": "--checkmark",
      "default": null,
      "description": "Checkmark icon as a `url()`. Override to swap the SVG (color is baked into the image)."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": "Default",
      "language": "html",
      "code": "<input type=\"checkbox\" class=\"l-checkbox\" checked />"
    },
    {
      "title": "In a field (no class needed)",
      "language": "html",
      "code": "<l-form-field>\n<label>Subscribe to the newsletter</label>\n<input type=\"checkbox\" />\n<l-hint>One email a month.</l-hint>\n</l-form-field>"
    }
  ]
}