Checkbox

Checkbox widgets are Input Fields that allow the user to toggle boolean (true/false) values. They are usually used to represent an “on/off” state.

Programmatic

checkbox.ts

import { gui } from '@golemui/gui-shared';

export default [
  gui.inputs.checkbox('createUser', {
    label: 'Create a new user?',
  }),
];

JSON

checkbox.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "checkbox",
      "path": "createUser",
      "label": "Create a new user?"
    }
  ]
}

Props

Use these props to customize your Checkbox widget.

prop	type	description
hint	string	A description to display below the checkout input
checkboxPosition	string	Position of the checkbox relative to its label. Possible values are left (default) or right.

Hint

Note

A label is required for the hint to be displayed.

Use the property hint to add a description.

Programmatic

checkbox.ts

import { gui } from '@golemui/gui-shared';

export default [
  gui.inputs.checkbox('newsletter', {
    hint: 'We promise not to spam your inbox.',
    label: 'Subscribe to newsletter',
  }),
];

JSON

checkbox.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "checkbox",
      "path": "newsletter",
      "label": "Subscribe to newsletter",
      "props": {
        "hint": "We promise not to spam your inbox."
      }
    }
  ]
}

Position

Use the property checkboxPosition to put the checkbox to the left (default) or right of its label.

Programmatic

checkbox.ts

import { gui } from '@golemui/gui-shared';

export default [
  gui.inputs.checkbox('acceptConditions', {
    checkboxPosition: 'left',
    label: 'Yes, I have read terms and conditions',
  }),
];

JSON

checkbox.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "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-radius-sm	Checkbox box border radius
--gui-intent-primary	Checkbox checked background and tick color

Anatomy

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

checkbox-anatomy.html

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

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