C&C Docs
Log in

cnc-toggle

A switch between exactly two values, labelled on both sides. It submits the value of whichever side is chosen rather than an on/off boolean, which makes it a two-option picker as much as a switch. Keyboard-operable, and backed by a real checkbox for forms and assistive technology.

Quick start

Give it two options. The first becomes the left label and the off position, the second the right label and the on position.

Light 
<div x-data="{ mode: 'Light' }">
  <cnc-toggle
    name="mode"
    $options="['Light','Dark']"
    @change="mode = $event.detail.value"
  ></cnc-toggle>
</div>

Usage guidance

A toggle suits a setting that takes effect as soon as it moves, and reads best when both sides are named — a switch labelled only on one side leaves the reader guessing what the other position means. Where the choice is genuinely on/off and belongs to a form that gets submitted, cnc-checkbox is the more conventional control and needs no second label. Where there are three or more choices, use radios: stretching a toggle over a third state is the beginning of a bad time.

← Back to Widgets