OTP Digit Boxes

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

4
2
7

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

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

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

More Input pieces

View all Input
4

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

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

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

Beste Sözen

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

Keyboard shortcut
ShiftK
REC
Press any combination

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

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

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

Remind me to buy coffee beans on my way home

Pill dictation input with a blinking caret, live waveform bars, and a rose mic button while listening.