Checkbox

Build a checkbox layout using icons

{
  "ux": {
    "component": "grid",
    "direction": "row",
    "alignItems": "center",
    "styles": {
      "padding": "10px 0px"
    },
    "children": [
      {
        "component": "icon",
        "description": "uncheck",
        "condition": {
          "rule": "data.value empty"
        },
        "shape": "circle",
        "radius": 10,
        "size": 14
      },
      {
        "component": "icon",
        "description": "check",
        "condition": {
          "rule": "data.value exists"
        },
        "icon": "fas fa-check",
        "shape": "circle",
        "radius": 10,
        "size": 14,
        "styles": {
          "color": "#fff",
          "fillColor": "green"
        },
        "options": {
          "showBorder": false
        }
      },
      {
        "component": "text",
        "text": "{data.text}",
        "styles": {
          "paddingLeft": "10px"
        }
      },
      {
        "component": "text",
        "text": "{data.hintText}",
        "condition": {
          "rule": "data.hintText exists"
        },
        "styles": {
          "color": "#fff",
          "backgroundColor": "green",
          "padding": "2px 4px",
          "marginLeft": "10px",
          "borderRadius": "10px",
          "fontSize": 12
        }
      }
    ]
  }
}