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.

checkbox.ts

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

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

checkbox.json

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "kind": "input",
      "type": "checkbox",
      "path": "createUser",
      "label": "Create a new user?"
    }
  ]
}

Props

Use these props to customize your Checkbox widget.

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

Hint

Note

A label is required for the hint to be displayed.

Use the property hint to add a description.

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',
  }),
];

checkbox.json

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "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.

checkbox.ts

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

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

checkbox.json

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "kind": "input",
      "type": "checkbox",
      "path": "acceptConditions",
      "label": "Yes, I have read terms and conditions",
      "props": {
        "checkboxPosition": "right"
      }
    }
  ]
}

Mandatory checkbox

validator: { required: true } alone does not force a checkbox checked: an unchecked box holds false, which is a valid boolean and passes validation. Add const: true to reject false, and keep required: true so the pristine undefined fails too. See Handling empty values for the full recipe with custom messages.

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>