`checkbox`

This component represents a checkbox that can take on two values.

Configuration

For general configuration options, see General Component Configuration.

Specific Configuration

type ("checkbox"): Component type.
value (Binding | boolean): Value of the checkbox.

General Configuration

In addition to the configurations that apply to all checkboxes, the following optional configurations can be set: boxLabel settings, disabled, errorTarget, icon, label, label settings, onChange, //readOnly, required.

Custom Styling

The visual design of the checkbox is primarily controlled via global variables. CSS can be used specifically for certain deviations.

Using the attribute cls , you can apply your own CSS rules. The component provides the following standard styling targets for this purpose:

.checkbox: Styles for the checkbox container.
.checkbox-label / .checkbox .label: Direct access to the checkbox Label.
.checkbox div:has(.value): Access to the checkbox input element.

Example

checkbox.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
    "styles": {
      "css": ".forms .checkbox.isActive { background-color: rgba(205, 255, 205, 0.8)} .forms .checkbox.isActive .label { color: rgb(0, 140, 0)} .forms .checkbox.isActive div:has(.value) { color: rgb(0, 140, 0)}"
    }
  },
  "components": [
    {
      "type": "container",
      "label": "Checkbox Component Example",
      "components": [
        {
          "type": "checkbox",
          "label": "First Checkbox",
          "value": "${/data/checkboxes/one}",
          "cls": "${/data/checkboxes/one ? 'isActive' : 'isInActive'}"
        },
        {
          "type": "html",
          "value": "First Checkbox is ${/data/checkboxes/one ? 'checked' : 'unchecked'}"
        },
        {
          "type": "checkbox",
          "label": "Second Checkbox",
          "value": true
        }
      ]
    }
  ],
  "state": {
    "data": {
      "checkboxes": {
        "one": true
      }
    }
  }
}

Embedded preview

Open preview in a separate window

Keywords: