Checkbox Group

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 Group — it needs no JavaScript, so the classes below are the whole story.

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

Root class checkbox-group, with 1 modifier:

• .checkbox-group
• .checkbox-option

React

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

npm i @wizeworks/silicaui-react

import { CheckboxGroup } 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 { CheckboxGroup, CheckboxOption } from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";

export function CheckboxGroupDemo() {
    const [channels, setChannels] = useState<string[]>(["email", "push"]);

    return (
        <>
            <Section title="Real use · notification channels">
                <CheckboxGroup value={channels} onValueChange={setChannels} color="primary">
                    <CheckboxOption value="email">Email</CheckboxOption>
                    <CheckboxOption value="push">Push</CheckboxOption>
                    <CheckboxOption value="sms">SMS</CheckboxOption>
                </CheckboxGroup>
                <p className="pt-2 text-xs opacity-60">
                    Selected: {channels.join(", ") || "none"}
                </p>
            </Section>

            <Section title="Horizontal">
                <CheckboxGroup defaultValue={["mon", "wed", "fri"]} orientation="horizontal" color="primary">
                    <CheckboxOption value="mon">Mon</CheckboxOption>
                    <CheckboxOption value="wed">Wed</CheckboxOption>
                    <CheckboxOption value="fri">Fri</CheckboxOption>
                </CheckboxGroup>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

CheckboxGroup / CheckboxOption — a native fieldset-free group of checkboxes; CheckboxOption's label text is its children, matching the React shape. 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("CheckboxGroup", "checkbox-group", { /* 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-group checkbox-group-primary" rather than passing a colour as a prop.

Takes children

yes

Hydrated by

nothing — this one is static markup