C&C Docs
Log in

cnc-switch

An on/off control for a setting that takes effect immediately — not a checkbox waiting for a submit. It carries a native checkbox for form submission and the correct role="switch" semantics.

Quick start

Bind $enabled and put the label in the default slot (or in text). Note the property is enabled, not checked or value.

Email notifications

enabled: true 

<div x-data="{ on: true }">
  <cnc-switch $enabled="on" @change="on = $event.detail.enabled">
    Email notifications
  </cnc-switch>
</div>

Usage guidance

A switch means the change happens NOW. Use a checkbox — cnc-checkbox — wherever the value is collected and applied later by a submit, and keep the switch for settings that take effect the moment they are flipped. Getting this backwards is the commonest misuse of both controls.

Label the state, not the action. "Email notifications" reads correctly in either position; "Enable email notifications" reads as a button and becomes ambiguous once the switch is already on. There is no separate on/off text, so the one label has to work both ways.

Because the effect is immediate, handle failure. A switch that flips and then silently fails to save leaves the user believing something is true that is not — set your state from change, and put it back if the write does not land.

← Back to Widgets