C&C Docs
Log in

cnc-button-group

A selection wrapper that renders related cnc-button children, joins their edges, tracks one or many active values, and forwards shared button styling.

Quick start

Bind $active to the selected value and provide button definitions through $buttons. The active button receives the group’s highlight color. 

x-debug: alignment
"center"
<div x-data="{ alignment: 'center' }">
  <cnc-button-group
    required
    highlight="primary"
    $active="alignment"
    $buttons="[{'label':'Left','value':'left'}, ...]"
  ></cnc-button-group>
</div>

Usage guidance

Use a button group for a compact set of related actions or view modes. Use cnc-choice, cnc-radios, or cnc-checkboxes when the values belong to a conventional form field.

← Back to Widgets