Components
Toggle
A hand-drawn toggle switch with a sliding circle thumb.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/toggle.jsonProps
PropTypeDefaultDescription
checkedboolean—
Controls the `checked` behavior.
classNamestring—
Additional Tailwind classes applied to the component.
defaultCheckedbooleanfalseControls the `defaultChecked` behavior.
disabledbooleanfalseDisables 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.
variantToggleVariant"ball"Controls the `variant` behavior.
States
Without label
Accessibility
Toggle uses a native checkbox input and mirrors its state visually with the rough sketch track. Pair it with a clear text label so assistive technologies can announce the setting meaningfully.
Examples
import { Toggle } from "@/components/crumble/ui/toggle";
<Toggle label="Notifications" />;