{
  "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": [
      "--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-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>"
    }
  ]
}