Components
Checkbox
A hand-drawn checkbox with a rough tick mark.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/checkbox.jsonProps
PropTypeDefaultDescription
checkedboolean—
Controls the `checked` behavior.
classNamestring—
Additional Tailwind classes applied to the component.
defaultCheckedboolean—
Controls the `defaultChecked` behavior.
disabledboolean—
Disables interaction.
idstring—
Optional stable id used for sketch seeding and accessibility.
labelstring—
Optional label text shown with the component.
onChange(checked: boolean) => void—
Callback fired when the value changes.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
States
Controlled
Accessibility
Checkbox uses a native checkbox input under the sketch overlay, so keyboard focus, spacebar toggling, and form submission all work normally. Provide a clear text label whenever the choice carries meaning.
Examples
import { Checkbox } from "@/components/crumble/ui/checkbox";
<Checkbox label="Accept terms" />;