C&C Docs
Log in

cnc-radios

A reactive radio group with custom controls, theme colors, filled and outline treatments, a complete size scale, and horizontal or vertical layouts.

Quick start

Provide options as value and text pairs, then bind $value to reactive state. Radio values are normalized to strings. 

x-debug: plan
"basic"
<div x-data="{ plan: 'business' }">
  <cnc-radios
    name="plan"
    color="primary"
    $options="[{'value':'basic','text':'Basic plan'}, ...]"
    $value="plan"
  ></cnc-radios>
</div>

Usage guidance

Use radio groups when exactly one option must be selected. Use cnc-checkbox or cnc-checkboxes when choices are independent or multiple selections are allowed.

← Back to Widgets