Checkbox

Native checkbox in shadcn geometry. Wrapping labels give a full-row hit area; hints and errors wire through [data-field].

INSTALL

1pnpm dlx @sayagodev/mo add form

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/form.css";

EXAMPLES

Basic

Accept terms and conditions

1<div data-field>2  <label><input type="checkbox" id="cb-basic" name="cb-basic" /> Accept terms and conditions</label>3</div>4

With description

Accept terms and conditions By clicking this checkbox, you agree to the terms and conditions.

1<div data-field>2  <div class="flex items-start gap-2">3    <input type="checkbox" id="cb-desc" name="cb-desc" checked />4    <div class="vstack gap-1">5      <label for="cb-desc">Accept terms and conditions</label>6      <small class="text-light">By clicking this checkbox, you agree to the terms and conditions.</small>7    </div>8  </div>9</div>10

Disabled

Enable notifications

1<div data-field>2  <label><input type="checkbox" id="cb-disabled" name="cb-disabled" disabled /> Enable notifications</label>3</div>4

Group

Show these items on the desktop:

Select the items you want to show on the desktop.

Hard disks External disks CDs, DVDs, and iPods Connected servers

1<fieldset>2  <legend>Show these items on the desktop:</legend>3  <p class="text-light">Select the items you want to show on the desktop.</p>4  <div class="vstack gap-2 mt-2">5    <label><input type="checkbox" id="cb-group-disks" name="cb-group" checked /> Hard disks</label>6    <label><input type="checkbox" id="cb-group-external" name="cb-group" checked /> External disks</label>7    <label><input type="checkbox" id="cb-group-cds" name="cb-group" /> CDs, DVDs, and iPods</label>8    <label><input type="checkbox" id="cb-group-servers" name="cb-group" /> Connected servers</label>9  </div>10</fieldset>11

Invalid

Accept terms and conditions Accept the terms and conditions to continue.

1<div data-field aria-invalid="true">2  <label><input type="checkbox" id="cb-invalid" name="cb-invalid" aria-invalid="true" /> Accept terms and conditions</label>3  <small class="error">Accept the terms and conditions to continue.</small>4</div>5

In a table

Name	Email	Role
Sarah Chen	[email protected]	Admin
Marcus Rodriguez	[email protected]	User
Priya Patel	[email protected]	User
David Kim	[email protected]	Editor

1<div class="table">2  <table>3    <thead>4      <tr>5        <th><input type="checkbox" aria-label="Select all rows" /></th>6        <th>Name</th>7        <th>Email</th>8        <th>Role</th>9      </tr>10    </thead>11    <tbody>12      <tr>13        <td><input type="checkbox" aria-label="Select row" checked /></td>14        <td><strong>Sarah Chen</strong></td>15        <td>[email protected]</td>16        <td>Admin</td>17      </tr>18      <tr>19        <td><input type="checkbox" aria-label="Select row" /></td>20        <td><strong>Marcus Rodriguez</strong></td>21        <td>[email protected]</td>22        <td>User</td>23      </tr>24      <tr>25        <td><input type="checkbox" aria-label="Select row" /></td>26        <td><strong>Priya Patel</strong></td>27        <td>[email protected]</td>28        <td>User</td>29      </tr>30      <tr>31        <td><input type="checkbox" aria-label="Select row" /></td>32        <td><strong>David Kim</strong></td>33        <td>[email protected]</td>34        <td>Editor</td>35      </tr>36    </tbody>37  </table>38</div>39

USAGE

1<label><input type="checkbox" checked /> Accept terms</label>2 3<!-- title + description -->4<div class="flex items-start gap-2">5  <input type="checkbox" id="cb" />6  <div class="vstack gap-1">7    <label for="cb">Title</label>8    <small class="text-light">Description.</small>9  </div>10</div>

API

NAMEKINDDESCRIPTION

input[type=checkbox]element1rem rounded box, primary check mask

checked / disabledattributeNative states, styled

[data-field]attributeReveals small.error on aria-invalid

labelelementinline-flex row when wrapping a control

FILES

src/css/form.css

Install:mo add form

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Global tokens

--background--border--destructive--foreground--input--muted--muted-foreground--primary--primary-foreground--radius--ring

Component hooks

--mo-field-gap--mo-input-padding-x--mo-input-radius--mo-slider-thumb-bg--mo-switch-thumb--mo-switch-width

Preview

Block deploys on failing checks

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.