Number Input
A number you can type, step or drag. Drag the label to scrub (Shift for ten steps, Alt for a tenth); hold a stepper to repeat, faster the longer you hold.
$149 once · every Pro piece
Customize
At a limit the value nudges toward the edge and springs back. Digits roll when the value changes and the field is not being edited.
Install
npx shadcn@latest add @obsyde/number-inputNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { NumberInput } from '@/components/obsyde/ember/number-input/NumberInput';
export function Example() {
return (
<NumberInput defaultValue={12} min={0} max={99} />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/number-input/NumberInput.tsxcomponentember/number-input/number-input.cssstylesember/number-input/NumberInputDemo.tsxdemoember/shared/rolling-number.csssharedember/shared/RollingNumber.tsxsharedember/shared/spring.tssharedember/shared/accent.tssharedember/forms-kit/kit.tsxsharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
labelLabel | string | 'Amount' |
valueValue | number | 12 |
minMin | number | 0 |
maxMax | number | 99 |
stepStep | number | 1 |
unitUnit | string | — |
disabledDisabled | boolean | false |