v0.11.0

Appearance

Checkbox <input> ​

Checkboxes let users select one or more options, or toggle a single setting on or off.

HTML tag<input>
⏣Native HTML
⬡Progressive
◇Custom
⬢Shadow DOM
Native HTML Element
html
<l-form-field>
  <label>Subscribe to the newsletter</label>
  <input type="checkbox" />
  <p class="l-hint">One email a month, unsubscribe anytime.</p>
</l-form-field>

l-form-field auto-styles a bare <input type="checkbox"> and wires the accessibility (label, hint, error, aria-*). Standalone, apply .l-checkbox to the input yourself.

For a single setting that takes effect immediately (no Save button), use a switch instead.

Options ​

Checked ​

Native checked attribute.

Disabled ​

Native disabled attribute.

States ​

Code
html
<div class="flex flex-col gap-3">
  <label class="flex items-center gap-2">
    <input
      type="checkbox"
      class="l-checkbox"
    />
    Unchecked
  </label>
  <label class="flex items-center gap-2">
    <input
      type="checkbox"
      class="l-checkbox"
      checked
    />
    Checked
  </label>
  <label class="flex items-center gap-2">
    <input
      type="checkbox"
      class="l-checkbox"
      id="demo-indeterminate"
    />
    Indeterminate
  </label>
  <label class="flex items-center gap-2">
    <input
      type="checkbox"
      class="l-checkbox"
      disabled
    />
    Disabled
  </label>
  <label class="flex items-center gap-2">
    <input
      type="checkbox"
      class="l-checkbox"
      checked
      disabled
    />
    Disabled checked
  </label>
  <label class="flex items-center gap-2">
    <input
      type="checkbox"
      class="l-checkbox"
      aria-invalid="true"
    />
    Invalid
  </label>
  <label class="flex items-center gap-2">
    <input
      type="checkbox"
      class="l-checkbox"
      checked
      aria-invalid="true"
    />
    Invalid checked
  </label>
</div>

Invalid ​

Styled via :user-invalid (after interaction) or by setting aria-invalid="true". Inside l-form-field this is managed for you.

Size & accent ​

Override --size for the box and --accent for the checked fill.

Code
html
<div class="flex items-center gap-4">
  <input
    type="checkbox"
    class="l-checkbox"
    checked
  />
  <input
    type="checkbox"
    class="l-checkbox [--size:1.5rem]"
    checked
  />
  <input
    type="checkbox"
    class="l-checkbox [--size:2rem] [--accent:var(--l-color-gray-900)]"
    checked
  />
</div>

Examples ​

With a hint ​

.l-hint adds always-visible helper text, linked to the control via aria-describedby.

One email a month, unsubscribe anytime.
Code
html
<l-form-field>
  <label>Subscribe to the newsletter</label>
  <input type="checkbox" />
  <p class="l-hint">One email a month, unsubscribe anytime.</p>
</l-form-field>

With an error ​

.l-error holds the validation message — hidden until the field is invalid, then revealed with aria-invalid and announced (role="alert"). invalid on the field forces the state here for the preview.

Read them before checking this box.

You must accept the terms to continue.
Code
html
<l-form-field invalid>
  <label>I accept the terms and conditions</label>
  <input
    type="checkbox"
    required
  />
  <p class="l-hint">Read them before checking this box.</p>
  <p class="l-error">You must accept the terms to continue.</p>
</l-form-field>

Accessibility ​

Criteria ​

Role

Uses native <input type=checkbox> — built-in checkbox semantics and checked/mixed states

WCAG4.1.2
RGAA11.1
Accessible name

Must have an associated <label> (wrap the input or use for/id)

WCAG1.3.1
RGAA11.1
Target size

The label is part of the click target; keep the interactive area at least 24×24px

WCAG2.5.8
Focus visible

Keyboard focus shows a 2px outline via :focus-visible

WCAG2.4.7
RGAA10.7
Required state

Native required communicates a mandatory field to assistive tech

WCAG3.3.2
RGAA11.10

Keyboard interactions ​

Space
Toggles the checkbox
Tab
Moves focus to the next focusable element

API reference ​

Importing ​

css
@import 'luxen-ui/css/checkbox';

Attributes & Properties ​

checkedAttribute
Whether the checkbox is checked.
disabledAttribute
Disables the checkbox.
requiredAttribute
Marks the checkbox as required for form submission.
indeterminateAttribute
Indeterminate state (DOM property el.indeterminate = true; renders a dash). Typically the parent of a group.
aria-invalidAttribute
Set to true to force the invalid style (otherwise applied via :user-invalid). l-form-field manages this automatically.

CSS classes ​

.l-checkboxClass
Base checkbox style, applied to <input type="checkbox">. Inside l-form-field a bare checkbox is auto-styled, so the class is optional there.

CSS custom properties ​

--sizedefault:1.25emCustom property
Box size.
--accentdefault:var(--l-form-control-activated-color)Custom property
Checked/indeterminate fill color.
--checkmarkCustom property
Checkmark icon as a url(). Override to swap the SVG (color is baked into the image).