Skip to main content

Checkbox

Boolean form control with support for indeterminate state, error styling, and three sizes.

Quick start 
import { Checkbox } from "mates-ui";

Checkbox({ label: "Accept terms", checked: true });

States

import { html, atom, renderApp } from 'mates';
import { Checkbox } from 'mates-ui';

const App = () => {
const checked1 = atom(false);
const checked2 = atom(true);

return () => html`<x-col gap="10px">
${Checkbox({ label: "Unchecked", atom: checked1 })}
${Checkbox({ label: "Checked", atom: checked2 })}
${Checkbox({ label: "Indeterminate", indeterminate: true })}
${Checkbox({ label: "Error state", error: true })}
${Checkbox({ label: "Disabled unchecked", disabled: true })}
${Checkbox({ label: "Disabled checked", disabled: true, checked: true })}
</x-col>`;
};

renderApp(App, document.getElementById('app'));

Checkbox

import { Checkbox } from "mates-ui";
Prop Type Default Description
atom AtomType<boolean> — Reactive atom binding. Reads and writes checked state. Supersedes checked.
attr AttrMap — HTML attributes on the root element.
checked boolean false Initial checked state (uncontrolled, no atom).
classes string — Extra CSS class name(s) appended to the root element.
classes string | string[] — Extra root classes — joined and appended. Joined and appended after built-in classes.
data DataAttrMap — Root `data-*` map (`testId` → `data-testid`). `testId` prop / `attr` win over `data`.
disabled boolean false Disables interaction.
error boolean false Shows error state; sets aria-invalid="true" on the input.
id string — Sets id on the native input. For a root wrapper id, use `attr: { id: "…" }`.
indeterminate boolean false Shows the dash (partial-selection) state.
label string | TemplateResult — Visible label rendered beside the control.
name string — HTML form field name.
on OnEventMap — DOM event handlers on the root element.
onChange (e: Event, checked: boolean) => void — Typed change shorthand; called after atom update when atom is bound.
onClick (e: MouseEvent) => void — Shorthand for `on.click` (`on.click` wins when both are set).
size "sm" | "md" | "lg" "md" Control size.
strikeThroughLabelOnCheck boolean false Strikes through the label text while checked.
style StyleMap — Root inline CSS (`style` prop; `style` wins if both set).
style StyleMap — Inline CSS on the root element.
testId string — Overrides default data-testid for testing.
value string — HTML form value when checked.

CSS tokens

Token Role
--md-color-border-primary Checked fill & border
--md-color-border-strong Unchecked box border
--md-color-error Error border & checked fill
--md-color-error-muted Error press background
--md-color-on-primary Checkmark / dash icon color
--md-color-text Label text color
--md-duration-short Check / border transition duration
--md-easing-standard Border & background transition easing
--md-focus-ring-color Focus ring outline color
--md-focus-ring-width Focus ring outline width
--md-font-family Label typeface
--md-space-3 Gap between box and label
--md-state-disabled-opacity Disabled opacity
--md-state-press-bg Unchecked press background
--md-text-base Font size — lg
--md-text-sm Font size — md (default)
--md-text-xs Font size — sm