C&C Docs
Log in

cnc-checkboxes

A reactive multi-select checkbox group that renders custom controls from an options array and exposes the selected option values as an array.

Quick start

Bind $value to an array. Each user selection updates the array while retaining the original option value types. 

x-debug: fruits
[
  "banana",
  "cherry"
]
<div x-data="{ fruits: ['banana'] }">
  <cnc-checkboxes
    name="fruits"
    color="primary"
    $options="[{'value':'apple','text':'Apple'}, ...]"
    $value="fruits"
  ></cnc-checkboxes>
</div>

Usage guidance

Use this widget for a dynamic multi-select list. Use cnc-checkbox for one independent boolean and cnc-radios when exactly one option must be selected.

← Back to Widgets