Mishka
Chelekom

Checkbox

v0.0.10

v0.0.10StableHeadlessStatelessAccessibleJSApache-2.0
Installation mix mishka.ui.gen.headless checkbox
Source View Source

Overview of the Phoenix and LiveView Headless Checkbox Component

The Mishka Chelekom Headless Checkbox ships zero opinionated styling - only the semantic markup, full WAI-ARIA wiring, a hidden native checkbox input for form submission, and paired-presence state (data-checked/data-unchecked). Every part - root, input, indicator and label - is addressable through a *_class attribute, so you style it entirely with your own Tailwind classes while the accessibility and behavior keep working underneath.

The root takes class. input_class, indicator_class and label_class reach the hidden native input that carries the form value, the indicator box and the label. The input is visually hidden and skipped by the Tab key, so input_class rarely changes how it looks: use it to give the native input a class of your own, for a selector or a script.

Base UI Checkbox example (Phoenix headless)

Base UI Checkbox example (Phoenix headless)

heex
<.checkbox
  id="baseui-checkbox-hero"
  checked
  class="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
  indicator_class="group flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-[checked]:bg-neutral-950 data-[checked]:text-white dark:data-[checked]:bg-white dark:data-[checked]:text-neutral-950"
>
  <:indicator>
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      class="block group-data-[unchecked]:hidden"
    >
      <path d="m2.5 8.5 4 4 7-9" />
    </svg>
  </:indicator>
  Enable notifications
</.checkbox>

Parts & data attributes

Each part carries a stable data-part and a structural chelekom-checkbox__* class you can target, plus paired-presence state for checked/unchecked/indeterminate.

Partdata-partState / ARIAPurpose
Root(button)role="checkbox", aria-checked, aria-readonly, aria-required, data-checked, data-unchecked, data-indeterminate, data-disabled, data-readonly, data-required, data-parentThe clickable control itself. Takes class.
Inputinputaria-hiddenHidden native checkbox that syncs form submission. Takes input_class.
Indicatorindicatoraria-hidden, data-checked, data-unchecked, data-indeterminateVisual box for your check icon; mirrors the root's state. Takes indicator_class.
Labellabel-Wraps the checkbox's inner content. Takes label_class.

Accessibility

Follows the WAI-ARIA Checkbox pattern: the root exposes role="checkbox" with a live aria-checked (true/false/mixed), and Space or Enter toggles the checked state. Mark a checkbox parent and wrap a set of checkboxes in a CheckboxGroup hook to get a tristate select-all that reflects all/none/some of its children.