Morpheus: Web Components UI Kit

Checkbox#

Component <neo-checkbox> is a three-state checkbox: checked, unchecked, or indeterminate (aria-checked="mixed") for parent rows whose children are partially selected. Participates in a wrapping <label> like a native checkbox.

Accept terms and conditions

HTML

CSS

The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.

Signals

Datastar signals declared in the selected state's markup. Change a value to drive the preview, applied live while Sync is on, or when you click Patch.

Reference#

Attributes #

Name	Type	Default	Description
`checked`	`boolean` reflected observed	`false`	Mirrored to `aria-checked`.
`indeterminate`	`boolean` reflected observed	`false`	Three-state mixed indicator.
`disabled`	`boolean` observed	`false`	Non-interactive state.
`size`	`"sm"`	none	Compact size. Omit for the default size.

Events #

Name	Detail	Bubbles	Description
`neo-checkbox-change`	`{ checked: boolean, indeterminate: boolean }`	yes	Fires after a click or `Space` / `Enter` activation.

CSS variables #

Name	Default	Description
`--neo-checkbox-size`	`1.15rem`	Box width and height. Drops to `0.875rem` at `size="sm"`.
`--neo-checkbox-radius`	`calc(var(--page-radius, 0.25rem) * 0.5)`	Corner radius.
`--neo-checkbox-border-width`	`1px`	Border width.
`--neo-checkbox-border`	`var(--btn-border)`	Border color when unchecked.
`--neo-checkbox-bg`	`transparent`	Background when unchecked.
`--neo-checkbox-checked-bg`	`var(--accent)`	Background when checked or indeterminate.
`--neo-checkbox-checked-border`	`var(--accent)`	Border color when checked or indeterminate.
`--neo-checkbox-mark-color`	`var(--accent-fg)`	Color of the check / indeterminate mark.
`--neo-checkbox-transition-duration`	`calc(120ms * var(--neo-duration-scale, 1))`	Duration of the background and mark transitions.
`--neo-checkbox-mark`	`url("data:image/svg+xml;utf8,<svg …><polyline points='5 12 10 17 19 7'/></svg>")`	Mask image for the checked mark. Override to swap the mark shape.
`--neo-checkbox-mark-indeterminate`	`url("data:image/svg+xml;utf8,<svg …><line x1='5' y1='12' x2='19' y2='12'/></svg>")`	Mask image for the indeterminate mark.

Examples#

States#

Three states: unchecked, checked, indeterminate. Click the box or focus with Tab and toggle with Space. Input on a mixed checkbox resolves it to checked, matching the native rule.

Unchecked

Checked

Indeterminate

Hide

HTML

Templ

CSS

Small size#

The size="sm" variant is a 0.875rem square, for dense rows where the default 1.15rem box would dominate.

Hide

HTML

Templ

Disabled#

disabled blocks pointer events, drops the host from the tab order, and fades it to 50% opacity. Each state still reads correctly.

Hide

HTML

Templ

With label#

Wrapping a checkbox in a <label> makes the whole row clickable: the host forwards clicks on its closest <label> ancestor and moves focus to itself, keeping the keyboard target in sync.

Accept terms and conditions

Settings group#

A typical settings panel: each row is its own <label>, with the checkbox on the left and the description on the right. The disabled row still shows its current value but resists interaction.

Email notifications Receive updates about your account.

Marketing emails Product news and announcements.

Required updates Locked by your organisation.

Hide

HTML

Templ

CSS

Examples: Datastar#

Tree selection#

Parent nodes go indeterminate when only some descendants are selected, checked when all are, and unchecked when none are. Each change posts to the server, which recomputes the parents and morphs the tree back into place.

Repository

Source

Read

Write

Deploy

Staging

Production

Billing

Invoices

Plan

Hide

HTML

Templ

Server script

<div
  id="checkbox-tree-example"
  class="checkbox-tree-example"
  data-signals="{checkbox_tree_key: '', checkbox_tree_checked: false}"
>
  <neo-tree role="tree" aria-label="Project permissions" class="checkbox-tree">
    <neo-tree-item role="treeitem" tabindex="-1" expanded>
      <div data-neo-tree-label>
        <neo-checkbox
          role="checkbox"
          indeterminate
          aria-checked="mixed"
          tabindex="0"
          aria-label="Repository permissions"
          data-on:neo-checkbox-change="$checkbox_tree_key = &#39;repository&#39;; $checkbox_tree_checked = evt.detail.checked; @post(&#39;/checkbox/tree/morph&#39;, { requestCancellation: &#39;disabled&#39; })"
        ></neo-checkbox>
        <span data-neo-tree-text>Repository</span>
      </div>
      <neo-tree-item role="treeitem" tabindex="-1" expanded>
        <div data-neo-tree-label>
          <neo-checkbox
            role="checkbox"
            checked
            aria-checked="true"
            tabindex="0"
            aria-label="Source permissions"
            data-on:neo-checkbox-change="$checkbox_tree_key = &#39;source&#39;; $checkbox_tree_checked = evt.detail.checked; @post(&#39;/checkbox/tree/morph&#39;, { requestCancellation: &#39;disabled&#39; })"
          ></neo-checkbox>
          <span data-neo-tree-text>Source</span>
        </div>
        <neo-tree-item role="treeitem" tabindex="-1">
          <div data-neo-tree-label>
            <neo-checkbox
              role="checkbox"
              checked
              aria-checked="true"
              tabindex="0"
              aria-label="Read source"
              data-on:neo-checkbox-change="$checkbox_tree_key = &#39;read&#39;; $checkbox_tree_checked = evt.detail.checked; @post(&#39;/checkbox/tree/morph&#39;, { requestCancellation: &#39;disabled&#39; })"
            ></neo-checkbox>
            <span data-neo-tree-text>Read</span>
          </div>
        </neo-tree-item>
        <neo-tree-item role="treeitem" tabindex="-1">
          <div data-neo-tree-label>
            <neo-checkbox
              role="checkbox"
              checked
              aria-checked="true"
              tabindex="0"
              aria-label="Write source"
              data-on:neo-checkbox-change="$checkbox_tree_key = &#39;write&#39;; $checkbox_tree_checked = evt.detail.checked; @post(&#39;/checkbox/tree/morph&#39;, { requestCancellation: &#39;disabled&#39; })"
            ></neo-checkbox>
            <span data-neo-tree-text>Write</span>
          </div>
        </neo-tree-item>
      </neo-tree-item>
      <neo-tree-item role="treeitem" tabindex="-1" expanded>
        <div data-neo-tree-label>
          <neo-checkbox
            role="checkbox"
            indeterminate
            aria-checked="mixed"
            tabindex="0"
            aria-label="Deploy permissions"
            data-on:neo-checkbox-change="$checkbox_tree_key = &#39;deploy&#39;; $checkbox_tree_checked = evt.detail.checked; @post(&#39;/checkbox/tree/morph&#39;, { requestCancellation: &#39;disabled&#39; })"
          ></neo-checkbox>
          <span data-neo-tree-text>Deploy</span>
        </div>
        <neo-tree-item role="treeitem" tabindex="-1">
          <div data-neo-tree-label>
            <neo-checkbox
              role="checkbox"
              checked
              aria-checked="true"
              tabindex="0"
              aria-label="Deploy staging"
              data-on:neo-checkbox-change="$checkbox_tree_key = &#39;staging&#39;; $checkbox_tree_checked = evt.detail.checked; @post(&#39;/checkbox/tree/morph&#39;, { requestCancellation: &#39;disabled&#39; })"
            ></neo-checkbox>
            <span data-neo-tree-text>Staging</span>
          </div>
        </neo-tree-item>
        <neo-tree-item role="treeitem" tabindex="-1">
          <div data-neo-tree-label>
            <neo-checkbox
              role="checkbox"
              aria-checked="false"
              tabindex="0"
              aria-label="Deploy production"
              data-on:neo-checkbox-change="$checkbox_tree_key = &#39;production&#39;; $checkbox_tree_checked = evt.detail.checked; @post(&#39;/checkbox/tree/morph&#39;, { requestCancellation: &#39;disabled&#39; })"
            ></neo-checkbox>
            <span data-neo-tree-text>Production</span>
          </div>
        </neo-tree-item>
      </neo-tree-item>
      <neo-tree-item role="treeitem" tabindex="-1" expanded>
        <div data-neo-tree-label>
          <neo-checkbox
            role="checkbox"
            aria-checked="false"
            tabindex="0"
            aria-label="Billing permissions"
            data-on:neo-checkbox-change="$checkbox_tree_key = &#39;billing&#39;; $checkbox_tree_checked = evt.detail.checked; @post(&#39;/checkbox/tree/morph&#39;, { requestCancellation: &#39;disabled&#39; })"
          ></neo-checkbox>
          <span data-neo-tree-text>Billing</span>
        </div>
        <neo-tree-item role="treeitem" tabindex="-1">
          <div data-neo-tree-label>
            <neo-checkbox
              role="checkbox"
              aria-checked="false"
              tabindex="0"
              aria-label="View invoices"
              data-on:neo-checkbox-change="$checkbox_tree_key = &#39;invoices&#39;; $checkbox_tree_checked = evt.detail.checked; @post(&#39;/checkbox/tree/morph&#39;, { requestCancellation: &#39;disabled&#39; })"
            ></neo-checkbox>
            <span data-neo-tree-text>Invoices</span>
          </div>
        </neo-tree-item>
        <neo-tree-item role="treeitem" tabindex="-1">
          <div data-neo-tree-label>
            <neo-checkbox
              role="checkbox"
              aria-checked="false"
              tabindex="0"
              aria-label="Manage plan"
              data-on:neo-checkbox-change="$checkbox_tree_key = &#39;plan&#39;; $checkbox_tree_checked = evt.detail.checked; @post(&#39;/checkbox/tree/morph&#39;, { requestCancellation: &#39;disabled&#39; })"
            ></neo-checkbox>
            <span data-neo-tree-text>Plan</span>
          </div>
        </neo-tree-item>
      </neo-tree-item>
    </neo-tree-item>
  </neo-tree>
</div>

package examples

import "github.com/romshark/morpheus/neo"

// CheckboxTree is the server-driven permissions tree. Each leaf posts
// only its (key, checked) pair; the simulated server recomputes parent
// indeterminate/checked state and morphs the tree back. Initial visual
// state is whatever this SSR template emits.
templ CheckboxTree() {
	<div id="checkbox-tree-example" class="checkbox-tree-example" data-signals="{checkbox_tree_key: '', checkbox_tree_checked: false}">
		@neo.TreeAttrs(templ.Attributes{
			"class":      "checkbox-tree",
			"aria-label": "Project permissions",
		}) {
			@neo.TreeItem(true) {
				@neo.TreeLabel() {
					@neo.CheckboxAttrs(neo.CheckboxOpts{
						Indeterminate: neo.Set(true),
						AriaLabel:     neo.Set("Repository permissions"),
					}, templ.Attributes{"data-on:neo-checkbox-change": "$checkbox_tree_key = 'repository'; $checkbox_tree_checked = evt.detail.checked; @post('/checkbox/tree/morph', { requestCancellation: 'disabled' })"})
					@neo.TreeText() {
						Repository
					}
				}
				@neo.TreeItem(true) {
					@neo.TreeLabel() {
						@neo.CheckboxAttrs(neo.CheckboxOpts{
							Checked:   neo.Set(true),
							AriaLabel: neo.Set("Source permissions"),
						}, templ.Attributes{"data-on:neo-checkbox-change": "$checkbox_tree_key = 'source'; $checkbox_tree_checked = evt.detail.checked; @post('/checkbox/tree/morph', { requestCancellation: 'disabled' })"})
						@neo.TreeText() {
							Source
						}
					}
					@neo.TreeItem(false) {
						@neo.TreeLabel() {
							@neo.CheckboxAttrs(neo.CheckboxOpts{
								Checked:   neo.Set(true),
								AriaLabel: neo.Set("Read source"),
							}, templ.Attributes{"data-on:neo-checkbox-change": "$checkbox_tree_key = 'read'; $checkbox_tree_checked = evt.detail.checked; @post('/checkbox/tree/morph', { requestCancellation: 'disabled' })"})
							@neo.TreeText() {
								Read
							}
						}
					}
					@neo.TreeItem(false) {
						@neo.TreeLabel() {
							@neo.CheckboxAttrs(neo.CheckboxOpts{
								Checked:   neo.Set(true),
								AriaLabel: neo.Set("Write source"),
							}, templ.Attributes{"data-on:neo-checkbox-change": "$checkbox_tree_key = 'write'; $checkbox_tree_checked = evt.detail.checked; @post('/checkbox/tree/morph', { requestCancellation: 'disabled' })"})
							@neo.TreeText() {
								Write
							}
						}
					}
				}
				@neo.TreeItem(true) {
					@neo.TreeLabel() {
						@neo.CheckboxAttrs(neo.CheckboxOpts{
							Indeterminate: neo.Set(true),
							AriaLabel:     neo.Set("Deploy permissions"),
						}, templ.Attributes{"data-on:neo-checkbox-change": "$checkbox_tree_key = 'deploy'; $checkbox_tree_checked = evt.detail.checked; @post('/checkbox/tree/morph', { requestCancellation: 'disabled' })"})
						@neo.TreeText() {
							Deploy
						}
					}
					@neo.TreeItem(false) {
						@neo.TreeLabel() {
							@neo.CheckboxAttrs(neo.CheckboxOpts{
								Checked:   neo.Set(true),
								AriaLabel: neo.Set("Deploy staging"),
							}, templ.Attributes{"data-on:neo-checkbox-change": "$checkbox_tree_key = 'staging'; $checkbox_tree_checked = evt.detail.checked; @post('/checkbox/tree/morph', { requestCancellation: 'disabled' })"})
							@neo.TreeText() {
								Staging
							}
						}
					}
					@neo.TreeItem(false) {
						@neo.TreeLabel() {
							@neo.CheckboxAttrs(neo.CheckboxOpts{
								AriaLabel: neo.Set("Deploy production"),
							}, templ.Attributes{"data-on:neo-checkbox-change": "$checkbox_tree_key = 'production'; $checkbox_tree_checked = evt.detail.checked; @post('/checkbox/tree/morph', { requestCancellation: 'disabled' })"})
							@neo.TreeText() {
								Production
							}
						}
					}
				}
				@neo.TreeItem(true) {
					@neo.TreeLabel() {
						@neo.CheckboxAttrs(neo.CheckboxOpts{
							AriaLabel: neo.Set("Billing permissions"),
						}, templ.Attributes{"data-on:neo-checkbox-change": "$checkbox_tree_key = 'billing'; $checkbox_tree_checked = evt.detail.checked; @post('/checkbox/tree/morph', { requestCancellation: 'disabled' })"})
						@neo.TreeText() {
							Billing
						}
					}
					@neo.TreeItem(false) {
						@neo.TreeLabel() {
							@neo.CheckboxAttrs(neo.CheckboxOpts{
								AriaLabel: neo.Set("View invoices"),
							}, templ.Attributes{"data-on:neo-checkbox-change": "$checkbox_tree_key = 'invoices'; $checkbox_tree_checked = evt.detail.checked; @post('/checkbox/tree/morph', { requestCancellation: 'disabled' })"})
							@neo.TreeText() {
								Invoices
							}
						}
					}
					@neo.TreeItem(false) {
						@neo.TreeLabel() {
							@neo.CheckboxAttrs(neo.CheckboxOpts{
								AriaLabel: neo.Set("Manage plan"),
							}, templ.Attributes{"data-on:neo-checkbox-change": "$checkbox_tree_key = 'plan'; $checkbox_tree_checked = evt.detail.checked; @post('/checkbox/tree/morph', { requestCancellation: 'disabled' })"})
							@neo.TreeText() {
								Plan
							}
						}
					}
				}
			}
		}
	</div>
}

// Server handler for "Tree selection". State lives here (a real server
// keeps it in a DB); on every checkbox change the client @posts the
// (key, checked) pair, the handler applies the change — branch click
// cascades to descendant leaves; ancestor branches auto-resolve from
// their leaves on each render — re-renders the whole tree fragment,
// and ships one element patch keyed by `#checkbox-tree-example`.

import sim from "/static/datasim.js";

const BRANCHES = {
	repository: ["read", "write", "staging", "production", "invoices", "plan"],
	source: ["read", "write"],
	deploy: ["staging", "production"],
	billing: ["invoices", "plan"],
};

const state = {
	read: true, write: true, staging: true,
	production: false, invoices: false, plan: false,
};

function apply(key, checked) {
	if (key in BRANCHES) {
		for (const leaf of BRANCHES[key]) state[leaf] = checked;
	} else if (key in state) {
		state[key] = checked;
	}
}

function status(key) {
	if (key in BRANCHES) {
		const leaves = BRANCHES[key];
		const n = leaves.filter((l) => state[l]).length;
		if (n === 0) return "";
		if (n === leaves.length) return "checked";
		return "indeterminate";
	}
	return state[key] ? "checked" : "";
}

function cb(key, ariaLabel) {
	const s = status(key);
	const checked = s === "checked";
	const indeterminate = s === "indeterminate";
	// Explicit true/false on every render: an omitted boolean is "no command"
	// to the morph-resilient checkbox, which then keeps its prior intent. A
	// leaf the server unchecked would re-assert its stale checked intent and
	// stay checked. Spelling out both states makes each morph authoritative.
	const aria = indeterminate ? "mixed" : String(checked);
	return `<neo-checkbox role="checkbox" tabindex="0" aria-label="${ariaLabel}" ` +
		`checked="${checked}" indeterminate="${indeterminate}" aria-checked="${aria}" ` +
		`data-on:neo-checkbox-change="$checkbox_tree_key='${key}'; $checkbox_tree_checked=evt.detail.checked; ` +
		`@post('/checkbox/tree/morph', { requestCancellation: 'disabled' })"></neo-checkbox>`;
}

const leaf = (key, label, ariaLabel) =>
	`<neo-tree-item role="treeitem" tabindex="-1">` +
	`<div data-neo-tree-label>${cb(key, ariaLabel)}<span data-neo-tree-text>${label}</span></div>` +
	`</neo-tree-item>`;

// Nested items are direct children; <neo-tree-item> renders the chevron
// and the animation wrapper in its shadow root.
const branch = (key, label, ariaLabel, children) =>
	`<neo-tree-item role="treeitem" tabindex="-1" aria-expanded="true" expanded>` +
	`<div data-neo-tree-label>${cb(key, ariaLabel)}<span data-neo-tree-text>${label}</span></div>` +
	children +
	`</neo-tree-item>`;

const render = () =>
	`<div id="checkbox-tree-example" class="checkbox-tree-example">` +
	`<neo-tree role="tree" class="checkbox-tree" aria-label="Project permissions">` +
	branch("repository", "Repository", "Repository permissions",
		branch("source", "Source", "Source permissions",
			leaf("read", "Read", "Read source") +
			leaf("write", "Write", "Write source")) +
		branch("deploy", "Deploy", "Deploy permissions",
			leaf("staging", "Staging", "Deploy staging") +
			leaf("production", "Production", "Deploy production")) +
		branch("billing", "Billing", "Billing permissions",
			leaf("invoices", "Invoices", "View invoices") +
			leaf("plan", "Plan", "Manage plan")),
	) +
	`</neo-tree>` +
	`</div>`;

sim.post("/checkbox/tree/morph", async (ctx, sse) => {
	const s = ctx.signals || {};
	const key = String(s.checkbox_tree_key || "");
	const checked = s.checkbox_tree_checked === true || s.checkbox_tree_checked === "true";
	apply(key, checked);
	sse.patchElements(render());
});

A wider screen, please

Checkbox#

Signals

Reference#

Attributes #

Events #

CSS variables #

Examples#

States#

Small size#

Disabled#

With label#

Settings group#

Examples: Datastar#

Tree selection#

Settings

Theme

Accessibility

Playgrounds

Server Simulator