components / 08
marked switch
the thumb moves because state changed. the border redraws because cheez noticed.
shadcn
npx shadcn@latest add berkantay/cheez/marked-switchlive
onplayground
size
label
character
on frame
interaction
on ink
interaction ink
state
<MarkedSwitch
checked={true}
checkedMark="rounded-box"
interactionMark="loose-circle"
character="rushed"
size="medium"
labelPosition="end"
onCheckedChange={setChecked}
>
human motion
</MarkedSwitch>behavior
the frame carries interactionstates
composition
independent native fieldsmark preferences
{
"motion": true,
"sound": false,
"hints": true
}reference
Base UI semantics, Cheez frameapi
| part | prop | type | default | purpose |
|---|---|---|---|---|
| Switch | checked | boolean | — | controlled on state |
| Switch | defaultChecked | boolean | false | uncontrolled initial state |
| Switch | onCheckedChange | function | — | state callback |
| Switch | checkedMark | CheezType | "rounded-box" | on-state frame |
| Switch | interactionMark | CheezType | "loose-circle" | hover and focus frame |
| Switch | checkedColor | string | "#b7ff3c" | on-state ink |
| Switch | interactionColor | string | "#8f74ff" | interaction ink |
| Switch | character | "calm" | "rushed" | "chaotic" | "rushed" | drawing personality |
| Switch | size | "small" | "medium" | "large" | "medium" | control scale |
| Switch | labelPosition | "start" | "end" | "end" | label placement |
| Switch | description | ReactNode | — | accessible helper text |
| Switch | error | ReactNode | — | invalid message and frame |
| Switch | name | string | — | native form field name |
| Switch | value | string | "on" | submitted on value |
| Switch | uncheckedValue | string | — | optional submitted off value |
| Switch | required | boolean | false | required on state |
| Switch | disabled | boolean | false | disabled state |
| Switch | readOnly | boolean | false | read-only state |
behavior notes
- Space toggles the focused switch
- the root exposes native switch semantics
- the thumb transition respects reduced motion
- checked and unchecked values can both join form data
- disabled switches never draw
- the label and description remain one click target