{
  "name": "ds-checkbox",
  "description": "Checkbox input component",
  "docUrl": "https://design.soracom.io/design-system/elements/checkbox/",
  "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-checkbox\"><input type=\"checkbox\" /><div>Checkbox label</div></label>"
    },
    {
      "name": "checked",
      "html": "<label class=\"ds-checkbox\"><input type=\"checkbox\" checked /><div>Checked</div></label>"
    },
    {
      "name": "small",
      "html": "<label class=\"ds-checkbox --small\"><input type=\"checkbox\" /><div>Small</div></label>"
    },
    {
      "name": "large",
      "html": "<label class=\"ds-checkbox --large\"><input type=\"checkbox\" /><div>Large</div></label>"
    },
    {
      "name": "alert",
      "html": "<label class=\"ds-checkbox --alert\"><input type=\"checkbox\" checked /><div>Alert</div></label>"
    },
    {
      "name": "success",
      "html": "<label class=\"ds-checkbox --success\"><input type=\"checkbox\" checked /><div>Success</div></label>"
    },
    {
      "name": "color-blue",
      "html": "<label class=\"ds-checkbox --color-blue\"><input type=\"checkbox\" checked /><div>Blue</div></label>"
    },
    {
      "name": "with-icon",
      "html": "<label class=\"ds-checkbox --icon-rocket\"><input type=\"checkbox\" /><div>With icon</div></label>"
    },
    {
      "name": "panel",
      "html": "<label class=\"ds-checkbox --panel\"><input type=\"checkbox\" /><div>Panel checkbox</div></label>"
    },
    {
      "name": "panel-simple",
      "html": "<label class=\"ds-checkbox --panel-simple\"><input type=\"checkbox\" /><div>Simple panel</div></label>"
    },
    {
      "name": "grouped-panel",
      "html": "<div class=\"ds-checkbox --panel\"><label><input type=\"checkbox\" /><div>Option 1</div></label><label><input type=\"checkbox\" /><div>Option 2</div></label><label><input type=\"checkbox\" /><div>Option 3</div></label></div>"
    },
    {
      "name": "dots",
      "html": "<label class=\"ds-checkbox --dots\"><input type=\"checkbox\" /><div>A</div></label>"
    },
    {
      "name": "swatch",
      "html": "<label class=\"ds-checkbox --swatch\"><input type=\"checkbox\" /><div>A</div></label>"
    },
    {
      "name": "round",
      "html": "<label class=\"ds-checkbox --round\"><input type=\"checkbox\" /><div>Round</div></label>"
    },
    {
      "name": "hide-label",
      "html": "<label class=\"ds-checkbox --hide-label --tip-right\"><input type=\"checkbox\" /><div>Tooltip text</div></label>"
    },
    {
      "name": "disabled",
      "html": "<label class=\"ds-checkbox\"><input type=\"checkbox\" disabled /><div>Disabled</div></label>"
    }
  ]
}