Checkbox

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Checkbox — it needs no JavaScript, so the classes below are the whole story.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class checkbox, with 13 modifiers:

• .checkbox
• .checkbox-accent
• .checkbox-error
• .checkbox-info
• .checkbox-lg
• .checkbox-md
• .checkbox-neutral
• .checkbox-primary
• .checkbox-secondary
• .checkbox-sm
• .checkbox-success
• .checkbox-warning
• .checkbox-xl
• .checkbox-xs

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { Checkbox } from "@wizeworks/silicaui-react";

Props

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

import { useState } from "react";
import { Checkbox } from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";
import { ColorVariantSizeGrid } from "../lib/ColorGrid";

const TASKS = ["Write the announcement", "Add screenshots", "Ping the design team"];

export function CheckboxDemo() {
    const [done, setDone] = useState<Record<string, boolean>>({
        "Write the announcement": true,
    });

    return (
        <>
            <ColorVariantSizeGrid
                Component={Checkbox}
                render={({ color, size }) => (
                    <label className="flex items-center gap-2 text-sm">
                        <Checkbox color={color} size={size} defaultChecked />
                        {color ?? size}
                    </label>
                )}
            />

            <Section title="Real use · launch checklist">
                <div className="flex flex-col gap-2">
                    {TASKS.map((task) => (
                        <label key={task} className="flex items-center gap-2 text-sm">
                            <Checkbox
                                color="primary"
                                checked={!!done[task]}
                                onChange={(e) =>
                                    setDone((p) => ({ ...p, [task]: e.target.checked }))
                                }
                            />
                            <span className={done[task] ? "line-through opacity-50" : ""}>
                                {task}
                            </span>
                        </label>
                    ))}
                </div>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Checkbox / Radio / Toggle — native <input>s of the matching type. Toggle shares checkbox semantics; only its class (toggle) plus role="switch" makes it a switch. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("Checkbox", "checkbox", { /* props */ }, [/* children */]);
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "checkbox checkbox-primary" rather than passing a colour as a prop.

Takes children

yes

Hydrated by

nothing — this one is static markup