Checkbox

Boolean toggle for confirmation or multi-select scenarios.

Usage Notes

• Use for terms agreement, multi-select settings, and per-item enable/disable.
• Not suitable for instant-activation toggles (use switch) or mutually exclusive options (use radio-group).
• Related components: switch for instant effect toggles, radio-group for exclusive options.
• Multiple options are typically arranged vertically inside a column.
• Use $checked and onchange for state binding.

Checked / disabled states

namespace: "doc_checkbox_state_diff",
  layout: {
    "column:diff": {
      "checkbox:checked": {
        label: "Checked",
        checked: true
      },
      "checkbox:unchecked": {
        label: "Unchecked"
      },
      "checkbox:disabled-checked": {
        label: "Disabled checked",
        checked: true,
        disabled: true
      },
      "checkbox:disabled": {
        label: "Disabled",
        disabled: true
      }
    }
  }
}

API Reference