Switch

On/off toggle: a checkbox with role="switch" rendering track and thumb, wired like every other control.

INSTALL

1pnpm dlx @sayagodev/mo add form

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

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

EXAMPLES

Basic

Airplane Mode

1<div class="hstack">2  <input type="checkbox" role="switch" id="sw-airplane" />3  <label for="sw-airplane">Airplane Mode</label>4</div>5

Sizes

Small

Default

Large

1<div class="vstack gap-3">2  <div class="hstack">3    <input type="checkbox" role="switch" class="small" id="sw-size-small" />4    <label for="sw-size-small">Small</label>5  </div>6  <div class="hstack">7    <input type="checkbox" role="switch" id="sw-size-default" />8    <label for="sw-size-default">Default</label>9  </div>10  <div class="hstack">11    <input type="checkbox" role="switch" class="large" id="sw-size-large" />12    <label for="sw-size-large">Large</label>13  </div>14</div>15

With description

Share across devices Focus is shared across devices, and turns off when you leave the app.

1<div class="flex items-center justify-between gap-4">2  <div class="vstack gap-1">3    <label for="sw-focus-mode">Share across devices</label>4    <small class="text-light">Focus is shared across devices, and turns off when you leave the app.</small>5  </div>6  <input type="checkbox" role="switch" id="sw-focus-mode" />7</div>8

Disabled

1<div data-field>2  <label><input type="checkbox" role="switch" id="sw-disabled" disabled /> Disabled</label>3</div>4

Invalid

Accept terms and conditions

You must accept the terms and conditions to continue.

1<div data-field aria-invalid="true">2  <div class="flex items-center justify-between gap-4">3    <div class="vstack gap-1">4      <label for="sw-terms">Accept terms and conditions</label>5    </div>6    <input type="checkbox" role="switch" id="sw-terms" aria-invalid="true" />7  </div>8  <small class="error">You must accept the terms and conditions to continue.</small>9</div>10

Choice cards

Share across devices Focus is shared across devices, and turns off when you leave the app. Enable notifications Receive notifications when focus mode is enabled or disabled.

1<div class="vstack gap-6">2  <label class="flex items-center justify-between gap-4">3    <span class="vstack gap-1">4      <strong>Share across devices</strong>5      <span class="text-light">Focus is shared across devices, and turns off when you leave the app.</span>6    </span>7    <input type="checkbox" role="switch" id="sw-card-share" />8  </label>9  <label class="flex items-center justify-between gap-4">10    <span class="vstack gap-1">11      <strong>Enable notifications</strong>12      <span class="text-light">Receive notifications when focus mode is enabled or disabled.</span>13    </span>14    <input type="checkbox" role="switch" id="sw-card-notifications" checked />15  </label>16</div>17

USAGE

1<label><input type="checkbox" role="switch" /> Airplane Mode</label>2 3<!-- choice card -->4<label class="flex items-center justify-between gap-4">5  <span class="vstack gap-1">6    <strong>Title</strong>7    <span class="text-light">Description.</span>8  </span>9  <input type="checkbox" role="switch" />10</label>

API

NAMEKINDDESCRIPTION

role="switch"attributeTurns a checkbox into the Switch track/thumb

--mo-switch-width / -thumbtokenTrack and thumb sizing

[data-field] + small.errorclassError reveal on invalid

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

Power

Your CSS

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