{
  "name": "switch",
  "displayName": "Switch",
  "type": "native",
  "isCustomElement": false,
  "tag": null,
  "nativeTag": "input",
  "selector": ".l-switch",
  "subItemOf": null,
  "summary": "Switches toggle a single setting on or off, taking effect immediately.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": "luxen-ui/css/switch",
    "js": null
  },
  "properties": [],
  "attributes": [
    {
      "name": "role",
      "data": false,
      "values": [],
      "description": "Must be `switch`. Promotes the native checkbox to a switch for assistive tech and triggers the switch skin / inline field layout."
    },
    {
      "name": "checked",
      "data": false,
      "values": [],
      "description": "Whether the switch is on."
    },
    {
      "name": "disabled",
      "data": false,
      "values": [],
      "description": "Disables the switch."
    },
    {
      "name": "required",
      "data": false,
      "values": [],
      "description": "Marks the switch as required for form submission."
    },
    {
      "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-switch",
      "description": "Base switch style, applied to `<input type=\"checkbox\" role=\"switch\">`. The `role=\"switch\"` is required so assistive tech announces \"on/off\" (not \"checked\") and `l-form-field` lays it out inline. Inside `l-form-field` a bare switch is auto-styled, so the class is optional there."
    }
  ],
  "cssParts": [],
  "cssProperties": [
    {
      "name": "--size",
      "default": "1.25em",
      "description": "Track height; the whole control scales from it."
    },
    {
      "name": "--accent",
      "default": "var(--l-form-control-activated-color)",
      "description": "Track fill when on."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": "Default",
      "language": "html",
      "code": "<input type=\"checkbox\" role=\"switch\" class=\"l-switch\" checked />"
    },
    {
      "title": "In a field (no class needed)",
      "language": "html",
      "code": "<l-form-field>\n<label>Email notifications</label>\n<input type=\"checkbox\" role=\"switch\" />\n<l-hint>We'll only email you about account activity.</l-hint>\n</l-form-field>"
    }
  ]
}