`checkbox`

Diese Komponente stellt eine Checkbox dar, die zwei Werte einnehmen kann.

Konfiguration

Für allgemeine Konfigurations-Optionen siehe Allgemeine Komponenten Konfiguration.

Spezifische Konfiguration

type ("checkbox"): Typ der Komponente.
value (Binding | boolean): Wert der Checkbox.

Allgemeine Konfiguration

Neben den für alle gültigen Konfigurationen, können optional folgende Konfigurationen gesetzt werden: boxLabel Einstellungen, disabled, errorTarget, icon, label, label Einstellungen, onChange, required.

Individuelles Styling

Das visuelle Design der Checkbox wird primär über die globalen Variablen gesteuert. Für spezifische Abweichungen kann gezielt CSS eingesetzt werden.

Über das Attribut cls können eigene CSS-Regeln angewendet werden. Die Komponente bietet dafür folgende Standard-Angriffspunkte:

.checkbox: Styles für den Container der Checkbox.
.checkbox-label / .checkbox .label: Direkter Zugriff auf das Label der Checkbox.
.checkbox div:has(.value): Zugriff auf das Eingabeelement der Checkbox.

Beispiel

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

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: