Examples

Character Counter

Type in the textare to watch the character counter change.

<textarea :change="count = this.value.length"></textarea>
<p class="text-sm text-right" :text="count ? `${count} / 240` : '0 / 240'"></p>

Select All Checkboxes

<input id="select_all" type="checkbox" :change="allChecked=this.checked">
<label for="select_all" class="cursor-pointer">Select All </label>

<input type="checkbox" :checked="allChecked"><label>Team 1</label>
<input type="checkbox" :checked="allChecked"><label>Team 2</label>
<input type="checkbox" :checked="allChecked"><label>Team 3</label>

Dropdown div toggle

<form>

  <select :change="activeGroup = this.value">
    <option value="option_a">Option A</option>
    <option value="option_b">Option B</option>
    <option value="option_c">Option C</option>
  </select>

  <div id="group_a" :class="activeGroup == 'option_a' ? 'block': 'hidden' ">
    Content For Group A
  </div>
  <div id="group_b" :class="activeGroup == 'option_b' ? 'block': 'hidden' ">
    Content For Group B
  </div>
  <div id="group_c" :class="activeGroup == 'option_c' ? 'block': 'hidden' ">
    Content For Group C
  </div>

</form>

Dependent Selects