{
  "name": "radio-group",
  "displayName": "Radio group",
  "type": "native",
  "isCustomElement": false,
  "tag": null,
  "nativeTag": "fieldset",
  "selector": ".l-radio-group",
  "subItemOf": null,
  "summary": "A set of native radios, shown as the classic dot or as joined buttons — the form counterpart of a segmented control.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": "luxen-ui/css/radio-group",
    "js": null
  },
  "properties": [],
  "attributes": [
    {
      "name": "aria-label",
      "data": false,
      "values": [],
      "description": "Names the group when no visible `<legend>` fits — a view switcher in a toolbar, say. Prefer a `<legend>`: it is the technique WCAG H71 and RGAA 11.6 ask for."
    },
    {
      "name": "data-appearance",
      "data": true,
      "values": [],
      "description": "button — Renders the items as joined buttons: put `.l-button` on each label. Omit it for the radio primitive: put `.l-radio` on each input."
    },
    {
      "name": "data-orientation",
      "data": true,
      "values": [
        "horizontal",
        "vertical"
      ],
      "description": "Stacks the items. Defaults to horizontal."
    }
  ],
  "events": [],
  "methods": [],
  "slots": [],
  "cssClasses": [
    {
      "name": ".l-radio-group",
      "description": "Applied to the `<fieldset>` grouping the radios. Its first child is the `<legend>` naming them; each item is a `<label>` wrapping one `<input type=\"radio\">`."
    }
  ],
  "cssParts": [],
  "cssProperties": [],
  "commands": [],
  "examples": [
    {
      "title": "Default appearance",
      "language": "html",
      "code": "<fieldset class=\"l-radio-group\" data-orientation=\"vertical\">\n<legend>Notifications</legend>\n<label>\n<input type=\"radio\" class=\"l-radio\" name=\"notifications\" value=\"all\" checked />\nAll new messages\n</label>\n<label>\n<input type=\"radio\" class=\"l-radio\" name=\"notifications\" value=\"none\" />\nNothing\n</label>\n</fieldset>"
    },
    {
      "title": "Button appearance",
      "language": "html",
      "code": "<fieldset class=\"l-radio-group\" data-appearance=\"button\">\n<legend>View</legend>\n<label class=\"l-button\">\n<input type=\"radio\" name=\"view\" value=\"list\" checked />\nList\n</label>\n<label class=\"l-button\">\n<input type=\"radio\" name=\"view\" value=\"board\" />\nBoard\n</label>\n</fieldset>"
    }
  ]
}