UnreviewedAny data-* attribute is forwarded to the rendered element.
Any aria-* attribute is forwarded to the rendered element.
Optional UnreviewedlabelVisible label — the value of the checkbox (clicked along with the box).
Convenience for the common single-string case; for richer content (markup,
a link, an info icon) use children. When both are supplied, label
renders first. Required unless children or aria-label is provided
(a role="checkbox" takes its name from the author, not the markup).
Optional UnreviewedhintSecondary text rendered under the label and exposed as the checkbox's accessible description. Not part of the accessible name.
Optional UnreviewedcheckedControlled checked state. When provided the checkbox is controlled — it
renders exactly this and never self-applies; onStateChange is a request
the consumer accepts by updating this prop. Use defaultChecked for an
uncontrolled checkbox. 'indeterminate' shows the minus glyph and takes
visual precedence; clicking it requests true.
Optional UnrevieweddefaultInitial checked state for an uncontrolled checkbox. Read once; later changes are ignored and the element updates its state after interaction.
Optional UnrevieweddisabledDisable the checkbox (no interaction, dropped from the tab order).
Optional UnreviewedroundRound the checkbox mark to a circle (border-radius: 999px on the box). Pass
a number (px) or a CSS length string for a rounded-square mark instead.
Optional UnreviewednameForm field name. Inside a <form> the checkbox submits under this name,
contributing value when checked — like a native checkbox.
Optional UnreviewedvalueValue submitted with the form when checked — like a native checkbox.
Optional UnreviewedtoneColor of the mark. In the default all scope this colors the checked-box
fill and unselected box border. A named tone or any literal CSS color ('#ff1493',
'rebeccapurple') for a one-off custom tone. Named tones track light/dark mode
automatically; a custom color keeps its hue + chroma and pins lightness to the
fill curve. Set toneScope="selected" to tone only the checked mark and leave
the empty box neutral. The label + hint stay neutral — recolor them in plain
CSS via the theme-aware --text-N-{tone} tokens.
Optional UnreviewedtoneApply tone to every state, or only while checked so the empty box stays
neutral. selected is useful when a tinted resting border would read as a
validation state.
Optional UnreviewedsizeSize variant. small=14px, medium=16px, large=18px box.
Optional UnreviewedonFired on click / Space before the element applies any change. Event-first
so event.preventDefault() is the synchronous veto (uncontrolled mode);
detail carries { next, prev }. In controlled mode the element never
self-applies — answer by updating checked, reject by doing nothing.
Optional UnreviewedonFired after the checked state changes — a native change event (the
post-apply counterpart to onStateChange). Not cancelable. For a controlled
checkbox this fires once you've updated checked.
Optional UnreviewedonLike onChange, but with a { checked, indeterminate, name, value } snapshot
as the second argument, matching Input's onValueChange.
Optional UnreviewedclassCSS class on the component's root element (merged with the component's own
classes). Use it directly for layout and positioning — grid/flex placement,
margins, alignment — rather than wrapping the component in a <div>/<span>.
Optional UnreviewedstyleInline styles on the component's root element. Set layout/positioning here
(or via className) directly on the component instead of adding a wrapper.
Optional UnreviewedchildrenChild elements. When provided, replaces the component's default label/content.
Optional UnreviewedidHTML id attribute.
Optional UnreviewedtitleHTML title attribute — native browser tooltip on hover.
Optional UnreviewedslotAssigns the element to a named <slot> of a parent web component (e.g.
slot="header" inside a <Card>, slot="footer" inside a <Dialog>).
Optional UnreviewedtabTab order. Set to -1 to skip the element when tabbing.
Optional UnreviewedkeyReact/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).
Common props for JSX component wrappers.