data-checked

Overview

data-checked binds the checked state of checkbox and radio inputs to data. It provides a simpler alternative to data-model for checkbox/radio-specific use cases.

When to use:

• Simple checkbox/radio state binding
• Read-only checked state from data
• When you don't need full two-way binding

Why use it:

• ✅ Simple and explicit for checkboxes/radios
• ✅ Reactive updates
• ✅ Works with expressions

Basic Usage

Checkbox

<input type="checkbox" data-checked="isEnabled">

With data:

{ isEnabled: true }

Output:

<input type="checkbox" checked>

Radio Button

<input type="radio" name="size" value="small" data-checked="size === 'small'">
<input type="radio" name="size" value="medium" data-checked="size === 'medium'">
<input type="radio" name="size" value="large" data-checked="size === 'large'">

Syntax

<input type="checkbox" data-checked="expression">
<input type="radio" data-checked="expression">

Features

1. Boolean Property Binding

<input type="checkbox" data-checked="settings.notifications">

2. Expression Evaluation

<input type="checkbox" data-checked="items.length > 0">
<input type="checkbox" data-checked="selectedItems.includes('item1')">

3. Radio Group

<div class="radio-group">
  <label>
    <input type="radio" name="theme" value="light" data-checked="theme === 'light'">
    Light
  </label>
  <label>
    <input type="radio" name="theme" value="dark" data-checked="theme === 'dark'">
    Dark
  </label>
  <label>
    <input type="radio" name="theme" value="system" data-checked="theme === 'system'">
    System
  </label>
</div>

4. With data-on for Interactivity

<input type="checkbox"
       data-checked="isComplete"
       data-on="change:toggleComplete">

Advanced Examples

Feature Toggles

<div class="feature-toggles">
  <label>
    <input type="checkbox"
           data-checked="features.darkMode"
           data-on="change:toggleFeature('darkMode')">
    Dark Mode
  </label>

  <label>
    <input type="checkbox"
           data-checked="features.notifications"
           data-on="change:toggleFeature('notifications')">
    Notifications
  </label>

  <label>
    <input type="checkbox"
           data-checked="features.autoSave"
           data-on="change:toggleFeature('autoSave')">
    Auto Save
  </label>
</div>

Selection in List

<ul data-for="item in items">
  <template>
    <li>
      <input type="checkbox"
             data-checked="selectedIds.includes(item.id)"
             data-on="change:toggleSelection(item.id)">
      <span data-text="item.name"></span>
    </li>
  </template>
</ul>

Select All / None

<div class="selection-controls">
  <label>
    <input type="checkbox"
           data-checked="selectedItems.length === allItems.length"
           data-on="change:selectAll">
    Select All
  </label>

  <ul data-for="item in allItems">
    <template>
      <li>
        <input type="checkbox"
               data-checked="selectedItems.includes(item.id)"
               data-on="change:toggleItem(item.id)">
        <span data-text="item.name"></span>
      </li>
    </template>
  </ul>
</div>

Tri-State Checkbox

<div class="category">
  <label>
    <input type="checkbox"
           data-checked="category.items.every(i => i.selected)"
           data-attr="indeterminate:category.items.some(i => i.selected) && !category.items.every(i => i.selected)"
           data-on="change:toggleCategory(category.id)">
    <span data-text="category.name"></span>
  </label>

  <div class="items" data-for="item in category.items">
    <template>
      <label>
        <input type="checkbox"
               data-checked="item.selected"
               data-on="change:toggleItem(item.id)">
        <span data-text="item.name"></span>
      </label>
    </template>
  </div>
</div>

API Reference

Works With

Expression Result

Common Pitfalls

⚠️ 1. Using on Wrong Input Type

<!-- ❌ Won't work on text inputs -->
<input type="text" data-checked="isActive">

<!-- ✅ Use on checkbox/radio only -->
<input type="checkbox" data-checked="isActive">

⚠️ 2. One-Way vs Two-Way

<!-- data-checked is one-way (data → checkbox) -->
<input type="checkbox" data-checked="isEnabled">

<!-- For two-way, use data-model -->
<input type="checkbox" data-model="isEnabled">

<!-- Or add event handler -->
<input type="checkbox"
       data-checked="isEnabled"
       data-on="change:updateEnabled">

⚠️ 3. Radio Without Name Attribute

<!-- ❌ Radios without name can all be selected -->
<input type="radio" data-checked="size === 'small'">
<input type="radio" data-checked="size === 'large'">

<!-- ✅ Always add name for radio groups -->
<input type="radio" name="size" data-checked="size === 'small'">
<input type="radio" name="size" data-checked="size === 'large'">

Comparison: data-checked vs data-model

<!-- Use data-checked for display -->
<input type="checkbox" data-checked="items.length > 0" disabled>

<!-- Use data-model for editing -->
<input type="checkbox" data-model="form.acceptTerms">

Related Directives

• data-model - For two-way binding
• data-on - For handling change events
• data-attr - For other checkbox attributes