Checkbox

Checkbox components are Control Fields that allow the user to enter boolean chains.

checkbox.json

{
  "form": {
    "uid": "",
    "kind": "layout",
    "widget": "stack",
    "children": [
      {
        "uid": "",
        "kind": "control",
        "widget": "checkbox",
        "path": "createUser",
        "label": "Create a new user?"
      }
    ]
  }
}

Props

Use this props to customize your Checkbox component.

prop	type	value
checkboxPosition	string	The checkbox position, possible values are right or left

Checkbox Position

Use the property checkboxPosition to add align the checkbox input to left or right.

checkbox.json

{
  "form": {
    "uid": "",
    "kind": "layout",
    "widget": "stack",
    "children": [
      {
        "uid": "",
        "kind": "control",
        "widget": "checkbox",
        "path": "acceptConditions",
        "label": "Yes, I have read terms and conditions",
        "props": {
          "checkboxPosition": "left"
        }
      }
    ]
  }
}

Styling

Checkboxes can be styled as explained in the Styling Guide.

CSS Variables

Following you will find a list with the CSS Variables and a quick description of what you will style.

CSS Variable	Description
--gui-color-border	Input border color
--gui-checkbox-radius	Checkbox radius
--gui-color-primary	Accent color and box shadow color

Anatomy

This is the anatomy of the Checkbox Component in case you want to use your CSS styles.

checkbox.html

<gui-checkbox class="gui-checkbox gui-checkbox--left">
  <label for="fieldUid">Label</label>

  <div class="gui-field gui-field--horizontal">
    <input
      type="checkbox"
      id="fieldUid"
      checked
      disabled
      aria-readonly="true"
      aria-required="true"
      aria-checked="false"
    />
  </div>
</gui-checkbox>