{
  "name": "ds-radio",
  "description": "Radio button input component",
  "docUrl": "https://design.soracom.io/design-system/elements/radio/",
  "category": "elements",
  "htmlElements": [
    "label",
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "size": {
      "support": "subset",
      "values": [
        "--small",
        "--medium",
        "--large"
      ]
    },
    "color": {
      "support": "all"
    },
    "visual-state": {
      "support": "all"
    },
    "state": {
      "support": "subset",
      "values": [
        "--disabled"
      ]
    },
    "variant": {
      "support": "custom",
      "values": [
        "--panel",
        "--panel-simple",
        "--dots",
        "--swatch",
        "--round",
        "--square",
        "--hide-label",
        "--image",
        "--fee"
      ]
    },
    "icon": {
      "support": "all"
    },
    "indent": {
      "support": "all"
    },
    "gap": {
      "support": "all"
    }
  },
  "examples": [
    {
      "name": "basic",
      "html": "<label class=\"ds-radio\"><input type=\"radio\" name=\"group\" /><div>Radio option</div></label>"
    },
    {
      "name": "checked",
      "html": "<label class=\"ds-radio\"><input type=\"radio\" name=\"group\" checked /><div>Selected option</div></label>"
    },
    {
      "name": "small",
      "html": "<label class=\"ds-radio --small\"><input type=\"radio\" name=\"group\" /><div>Small</div></label>"
    },
    {
      "name": "large",
      "html": "<label class=\"ds-radio --large\"><input type=\"radio\" name=\"group\" /><div>Large</div></label>"
    },
    {
      "name": "alert",
      "html": "<label class=\"ds-radio --alert\"><input type=\"radio\" name=\"group\" checked /><div>Alert</div></label>"
    },
    {
      "name": "success",
      "html": "<label class=\"ds-radio --success\"><input type=\"radio\" name=\"group\" checked /><div>Success</div></label>"
    },
    {
      "name": "color-blue",
      "html": "<label class=\"ds-radio --color-blue\"><input type=\"radio\" name=\"group\" checked /><div>Blue</div></label>"
    },
    {
      "name": "color-purple",
      "html": "<label class=\"ds-radio --color-purple\"><input type=\"radio\" name=\"group\" checked /><div>Purple</div></label>"
    },
    {
      "name": "with-icon",
      "html": "<label class=\"ds-radio --icon-rocket\"><input type=\"radio\" name=\"group\" /><div>With icon</div></label>"
    },
    {
      "name": "panel",
      "html": "<label class=\"ds-radio --panel\"><input type=\"radio\" name=\"group\" /><div>Panel radio</div></label>"
    },
    {
      "name": "panel-simple",
      "html": "<label class=\"ds-radio --panel-simple\"><input type=\"radio\" name=\"group\" /><div>Simple panel</div></label>"
    },
    {
      "name": "dots",
      "html": "<label class=\"ds-radio --dots\"><input type=\"radio\" name=\"group\" /><div>A</div></label>"
    },
    {
      "name": "swatch",
      "html": "<label class=\"ds-radio --swatch\"><input type=\"radio\" name=\"group\" /><div>A</div></label>"
    },
    {
      "name": "square",
      "html": "<label class=\"ds-radio --square\"><input type=\"radio\" name=\"group\" /><div>A</div></label>"
    },
    {
      "name": "hide-label",
      "html": "<label class=\"ds-radio --hide-label --tip-right\"><input type=\"radio\" name=\"group\" /><div>Tooltip text</div></label>"
    },
    {
      "name": "disabled",
      "html": "<label class=\"ds-radio\"><input type=\"radio\" name=\"group\" disabled /><div>Disabled</div></label>"
    }
  ]
}