C&C Docs
Log in
Templates

Forms & x-model — two-way binding, checkbox arrays, <select multiple>

x-model keeps a field and a value in sync: type in the field and the value changes, change the value and the field shows it. A checkbox group and a <select multiple> each bind one array. Every demo below is live.

x-model — text two-way bind
<div x-data="{ name: 'Ada' }">
  <input x-model="name" placeholder="Your name" class="" />
  <p class="">Hello, <span class="" x-text="name || '—'"></span>.</p>
  <button @click="name = 'Ada'" class="">Set to Ada (writes state → input reflects)</button>
</div>
Result

Hello, Ada.
x-model.number + textarea
<div x-data="{ qty: 3, note: 'ship fast' }">
  <label class="">Quantity (<code class="font-mono">x-model.number</code>)</label>
  <input type="number" x-model.number="qty" min="0" class="" />
  <p class=""><code class="font-mono">qty + 10</code> = <span class="" x-text="qty + 10"></span> (numeric, not string-joined)</p>
  <label class="">Note (<code class="font-mono">textarea</code>)</label>
  <textarea x-model="note" rows="2" class=""></textarea>
  <p class="">Note is <span class="" x-text="note.length"></span> chars.</p>
</div>
Result

qty + 10 = 13 (numeric, not string-joined)

Note is 9 chars.
checkbox array — one x-model, one array
<div x-data="{ colors: ['red'] }">
  <p class="">Pick colours — one <code class="font-mono">x-model="colors"</code> across the group:</p>
  <div class="">
    <label class="flex items-center gap-2"><input type="checkbox" value="red" x-model="colors"> Red</label>
    <label class="flex items-center gap-2"><input type="checkbox" value="green" x-model="colors"> Green</label>
    <label class="flex items-center gap-2"><input type="checkbox" value="blue" x-model="colors"> Blue</label>
  </div>
  <p class="">colors = <span class="" x-text="JSON.stringify(colors)"></span></p>
</div>
Result

Pick colours — one x-model="colors" across the group:

colors = ["red"]
<select multiple> — array of selected values
<div x-data="{ picked: ['rust'] }">
  <label class="">Languages (Ctrl/Cmd-click to multi-select)</label>
  <select multiple x-model="picked" size="4" class="">
    <option value="rust" :selected="picked.includes('rust')">Rust</option>
    <option value="odin" :selected="picked.includes('odin')">Odin</option>
    <option value="zig" :selected="picked.includes('zig')">Zig</option>
    <option value="go" :selected="picked.includes('go')">Go</option>
  </select>
  <p class="">picked = <span class="" x-text="JSON.stringify(picked)"></span></p>
</div>
Result

picked = ["rust"]