Checkbox

Checkbox components 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 { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'checkbox',
      path: 'createUser',
      label: 'Create a new user?',
    },
  ],
});

checkbox.json

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

Props

Use these props to customize your Checkbox component.

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.

checkbox.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'checkbox',
      path: 'newsletter',
      label: 'Subscribe to newsletter',
      props: {
        hint: 'We promise not to spam your inbox.',
      },
    },
  ],
});

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.

checkbox.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'checkbox',
      path: 'acceptConditions',
      label: 'Yes, I have read terms and conditions',
      props: {
        checkboxPosition: 'left',
      },
    },
  ],
});

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 Component 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>