OTP Digit Boxes

4
2
7
About this piece

OTP Digit Boxes

Row of square digit cells with a blinking cursor in the next empty slot.

Usage

The import and the props worth knowing about, in one place.

import { Input2 } from "@/components/beste/piece/input2";

<Input2
  digits={[
    "4",
    "2",
    "7",
    "",
    "",
    ""
  ]}
  total={6}
/>

More Input pieces

View all Input
Verification codeSent to hello@beste.co
Enter the 6-digit code

OTP Autofill

Six code boxes fill one by one behind a moving caret, shake in rose when the first code is wrong, then refill with the right one and settle into an emerald verified state.

••••••••••••••••

Password Dots

Masked password row rendered as spaced mono bullets paired with an eye reveal button.

4

Number Stepper

Compact number control with minus and plus buttons flanking a centered mono value.

Beste Sözen

Text Field

Bare text input atom with a focused state that adds a primary ring and a blinking caret after the value.

How was your stay?
4.0
Tap to rate. Optional comment on the next step.

Rating Input

Five-star rater with filled amber stars in muted tiles and a decimal rating chip to the right.

Keyboard shortcut
ShiftK
REC
Press any combination

Shortcut Recorder

Keyboard shortcut field that renders the captured keys as keycap pills with a blinking REC indicator while recording.