Checkbox

Free · MIT

Headless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.

← Character Count Checkbox Group →

Install

Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).

Unstyled — behavior only, you write the CSS

npx astrocraft-ui add forms/checkbox

Plain-CSS theme — no build step

npx astrocraft-ui add forms/checkbox --theme css

Tailwind theme — needs Tailwind v4

npx astrocraft-ui add forms/checkbox --theme tailwind

Plain-CSS theme, re-pointed onto Lumos tokens

npx astrocraft-ui add forms/checkbox --theme css --bridge lumos

Tailwind theme, re-pointed onto Lumos tokens

npx astrocraft-ui add forms/checkbox --theme tailwind --bridge lumos

Attribute surface

With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.

Component	Slots	Variants	Runtime state	Native state
`Checkbox.astro`	`checkbox` `checkbox-check` `checkbox-root`	—	—	`:checked`

Source

What the command copies — 2 files, alias-free so the copy lands standing alone. This is the whole component; there is nothing else.

src/components/ui/forms/checkbox/Checkbox.astro

---
// src/components/ui/forms/checkbox/Checkbox.astro — headless primitive (see ../../README.md).
// Native <input type=checkbox> followed by the check glyph. Associate a Label via `id`/`for`. Zero-JS.
//
// SIBLING ORDER IS PART OF THE CONTRACT: the input comes FIRST, so a theme can style the glyph off
// the input's state with `[data-slot="checkbox"]:checked ~ [data-slot="checkbox-check"]` — the plain
// sibling selector the old `peer-checked:` utility compiled to. Reorder the two and the component
// still looks fine and silently stops reflecting its state.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"input">;

const { class: className, ...rest } = Astro.props;
---

<span data-slot="checkbox-root">
  <input type="checkbox" class={className} data-slot="checkbox" {...rest} />
  <slot name="indicator"
    ><svg
      data-slot="checkbox-check"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="3"
      stroke-linecap="round"
      stroke-linejoin="round"
      aria-hidden="true"
    >
      <path d="M20 6 9 17l-5-5"></path>
    </svg></slot
  >
</span>

src/components/ui/forms/checkbox/index.ts

import Checkbox from "./Checkbox.astro";

export { Checkbox };
export default Checkbox;

What you get

The component source, copied into your project by npx astrocraft-ui add forms/checkbox — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.

Install

Live demo

Checkbox, Radio & Switch

Attribute surface

Source

What you get