Pin Input
A one-time code field: one real input drives every cell, so paste, autofill and mobile keyboards just work.
$149 once · every Pro piece
Customize
The cells are filled wells with a blinking caret in the active one; digits drop into place, a warm pulse runs across the cells on completion, then the code is checked: a check draws when it is right, the row shakes and clears when it is wrong.
Install
npx shadcn@latest add @obsyde/pin-inputNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { PinInput } from '@/components/obsyde/ember/pin-input/PinInput';
export function Example() {
return (
<PinInput label="Verification code" />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/pin-input/PinInput.tsxcomponentember/pin-input/pin-input.cssstylesember/pin-input/PinInputDemo.tsxdemoember/forms-kit/kit.tsxsharedember/shared/spring.tssharedember/shared/accent.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
labelLabel | string | 'Verification code' |
lengthLength | number | 6 |
maskMask | boolean | false |
disabledDisabled | boolean | false |