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.

Base UI Checkbox example (Phoenix headless)

<.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.

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.