{
  "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": [
      "--small",
      "--medium",
      "--large"
    ],
    "color": "all",
    "visual-state": [
      "--alert",
      "--warning",
      "--success",
      "--info"
    ],
    "state": [
      "--disabled",
      "--checked"
    ],
    "variant": [
      "--panel",
      "--panel-simple",
      "--dots",
      "--swatch",
      "--round",
      "--square",
      "--hide-label",
      "--image",
      "--fee"
    ],
    "icon": "all",
    "indent": "all",
    "gap": "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>"
    }
  ]
}