C&C Docs
Log in

cnc-select

A dropdown control for single or multiple values, with searching, free-text entry, custom option mappings, icons, descriptions, counts, and input-compatible sizes and states.

Quick start

Bind $value to application state and pass an array through $options. Each option uses value and text by default.

cherry 
<div x-data="{ fruit: 'cherry' }">
  <cnc-select
    name="fruit"
    placeholder="Choose a fruit..."
    $value="fruit"
    $options='[{"value":"apple","text":"Apple"},{"value":"cherry","text":"Cherry"}]'
  ></cnc-select>
</div>

Usage guidance

Use a select when the option list is too long for radios or when multiple selections need to stay compact. Prefer radios for a small set of mutually exclusive choices, and checkboxes for a small set of independent choices that should remain visible.

← Back to Widgets