Quill docs

Checkbox

A checkbox: a role=checkbox box carrying aria-checked (true / false / mixed) next to its label. The mixed state models a parent of partially-selected children. The box is focusable and toggles on click or Space; the styled layer draws the check/dash glyph.

Live demo#

Click any box (or focus it and press Space) to toggle it. The third box starts in the indeterminate (mixed) state — a first click resolves it. Each renders in its initial state with JS off.

Email me product news

I accept the terms

Select all (some selected)

Theme it#

Flip the component axes for this preview alone — the controls re-point scoped design tokens on the demo stage and the component itself restyles. Variant controls swap the component class, surface controls change the visual treatment, and motion controls change the interaction feel without leaking to the page.

Email me product news

I accept the terms

Select all (some selected)

Density

Radius

Surface

Motion

// This demo is scoped: these axes apply only to this preview.
el("div")
    .attr("data-q-size", "cozy")
    .attr("data-q-radius", "rounded")
    .attr("data-q-surface", "flat")
    .attr("data-q-motion", "smooth")
    .child(
        Checkbox::new("cb", "Email me product news", false).island("cb-island")
    )

Code#

Construct the component with its builder:

// Unchecked, checked, and indeterminate (mixed) — each a live island.
Checkbox::new("cb-news", "Email me product news", false).island("cb-news-island")
Checkbox::new("cb-terms", "I accept the terms", true).island("cb-terms-island")
Checkbox::mixed("cb-all", "Select all (some selected)").island("cb-all-island")