Label

Form label in medium weight, block over controls and inline when wrapping a checkbox, radio or switch.

INSTALL

1pnpm dlx @sayagodev/mo add form

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

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

EXAMPLES

With checkbox

Accept terms and conditions

1<div class="flex items-center gap-2">2  <input type="checkbox" id="ex-terms" />3  <label for="ex-terms">Accept terms and conditions</label>4</div>5

USAGE

1<label for="id">Accept terms and conditions</label>2 3<!-- wraps a control: becomes an inline-flex row -->4<label><input type="checkbox" /> Newsletter</label>

API

NAMEKINDDESCRIPTION

labelelementBlock, medium weight over controls

label:has(control)elementAuto inline-flex with gap around checkboxes/radios/switches

forattributeAssociates the label with its 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

Auto-deploy on green build

Your CSS

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