OTP Autofill

Verification codeSent to hello@beste.co
Enter the 6-digit code
About this piece

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.

Usage

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

import { Input31 } from "@/components/beste/piece/input31";

<Input31
  label="Verification code"
  hint="Sent to hello@beste.co"
  code="482913"
  wrongCode="482910"
/>

More Input pieces

View all Input
4
2
7

OTP Digit Boxes

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

/^[a-z]+@beste\.co$/gi42

Regex Input

Regex field with slash delimiters, flag suffix in amber, and an emerald match-count pill on the right.

Choose a password
0 characters entered
  • At least 8 characters
  • Contains a number
  • Contains a symbol

Password Strength

Masked characters type into the field while a four-segment meter climbs from rose through amber to emerald and each rule in the checklist ticks green, then it clears and starts over.

Remind me to buy coffee beans on my way home

Dictation Input

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

Mira violet#6D5EFA

Color Input

Color field pairing a filled swatch with the chosen name and hex code and an eyedropper button.

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.