{
  "name": "radio",
  "displayName": "Radio",
  "type": "native",
  "isCustomElement": false,
  "tag": null,
  "nativeTag": "input",
  "selector": ".l-radio",
  "subItemOf": null,
  "summary": "Radios let users pick a single option from a set of mutually exclusive choices.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": "luxen-ui/css/radio",
    "js": null
  },
  "properties": [],
  "attributes": [
    {
      "name": "name",
      "data": false,
      "values": [],
      "description": "Groups radios so only one can be selected at a time. Every radio in a group shares the same `name`."
    },
    {
      "name": "value",
      "data": false,
      "values": [],
      "description": "The value submitted with the form when this radio is the selected one in its group."
    },
    {
      "name": "checked",
      "data": false,
      "values": [],
      "description": "Whether the radio is selected."
    },
    {
      "name": "disabled",
      "data": false,
      "values": [],
      "description": "Disables the radio."
    },
    {
      "name": "required",
      "data": false,
      "values": [],
      "description": "Marks the group 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-radio",
      "description": "Base radio style, applied to `<input type=\"radio\">`. Inside `l-form-field` a bare radio 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": "Selected fill color."
    },
    {
      "name": "--dot",
      "default": null,
      "description": "Selected dot icon as a `url()`. Override to swap the SVG (color is baked into the image)."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": "Default",
      "language": "html",
      "code": "<input type=\"radio\" class=\"l-radio\" name=\"plan\" value=\"free\" checked />"
    },
    {
      "title": "In a field (no class needed)",
      "language": "html",
      "code": "<l-form-field>\n<label>Free</label>\n<input type=\"radio\" name=\"plan\" value=\"free\" />\n</l-form-field>"
    }
  ]
}