C&C Docs
Log in

cnc-choice

A reactive single- or multi-select wrapper for card-style options. Use its neutral fallback presentation or project a custom option template while the widget retains selection, form, and accessibility behavior.

Quick start

Provide strings or objects through options, then bind $value to reactive state. This example is required, so clicking the selected option again keeps it selected. Without required, clicking it again clears the value. 

x-debug: plan
"pro"
<div x-data="{ plan: 'pro' }">
  <cnc-choice
    required
    name="plan"
    $options="[{'value':'starter','text':'Starter plan'}, ...]"
    $value="plan"
  ></cnc-choice>
</div>

Usage guidance

Use cnc-choice when each option should behave like a selectable card or needs a custom template. Use cnc-radios or cnc-checkboxes for conventional form controls.

← Back to Widgets