components / 06
marked checkbox
a tiny decision gets a tiny human gesture. no generic check icon required.
shadcn
npx shadcn@latest add berkantay/cheez/marked-checkboxlive
uncheckedplayground
size
label
character
checked mark
interaction
checked ink
interaction ink
state
<MarkedCheckbox
checked={false}
indeterminate={false}
checkedMark="check"
interactionMark="rounded-box"
character="rushed"
size="medium"
labelPosition="end"
onCheckedChange={setChecked}
>
ship this release
</MarkedCheckbox>behavior
each state has a distinct gesturestates
composition
1 / 3release checklist
the parent draws an indeterminate stroke when only part of the release is ready. selecting it resolves the whole group.
reference
Base UI semantics, Cheez characterapi
| part | prop | type | default | purpose |
|---|---|---|---|---|
| Checkbox | checked | boolean | — | controlled checked state |
| Checkbox | defaultChecked | boolean | false | uncontrolled initial state |
| Checkbox | onCheckedChange | function | — | checked state callback |
| Checkbox | indeterminate | boolean | false | mixed selection state |
| Checkbox | checkedMark | CheezType | "check" | selected symbol |
| Checkbox | indeterminateMark | CheezType | "short-underline" | mixed-state symbol |
| Checkbox | interactionMark | CheezType | "rounded-box" | hover and focus boundary |
| Checkbox | checkedColor | string | "#b7ff3c" | selected ink |
| Checkbox | interactionColor | string | "#8f74ff" | hover and focus ink |
| Checkbox | character | "calm" | "rushed" | "chaotic" | "rushed" | drawing personality |
| Checkbox | size | "small" | "medium" | "large" | "medium" | control scale |
| Checkbox | labelPosition | "start" | "end" | "end" | label placement |
| Checkbox | description | ReactNode | — | accessible helper text |
| Checkbox | error | ReactNode | — | invalid message and mark |
| Checkbox | name | string | — | native form field name |
| Checkbox | value | string | — | submitted checked value |
| Checkbox | required | boolean | false | required form state |
| Checkbox | disabled | boolean | false | disabled state |
| Checkbox | readOnly | boolean | false | read-only state |
behavior notes
- Space toggles the focused checkbox
- checked, unchecked, and mixed states use correct ARIA semantics
- the hidden native input participates in form submission
- labels and descriptions are one large click target
- disabled choices never animate
- selection symbols can carry product character