Components
Number Input
A hand-drawn number input with rough increment and decrement buttons.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/number-input.jsonProps
PropTypeDefaultDescription
classNamestring—
Additional Tailwind classes applied to the component.
defaultValuenumber0Initial uncontrolled value.
disabledboolean—
Disables interaction.
errorstring—
Error message shown below the component.
idstring—
Optional stable id used for sketch seeding and accessibility.
labelstring—
Optional label text shown with the component.
maxnumber—
Upper bound for the value.
minnumber—
Lower bound for the value.
onChange(value: number) => void—
Callback fired when the value changes.
stepnumber1Increment between values.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
valuenumber—
Controlled value for the component.
Min, max and step
Error state
Must be at least 6
Disabled
Accessibility
NumberInput uses a native number field plus semantic buttons for stepping, so focus management remains predictable. Keep the label visible when the number has units or limits that are not obvious.
Examples
import { NumberInput } from "@/components/crumble/ui/number-input";
<NumberInput label="Quantity" defaultValue={1} min={0} />;