Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input OTP examples · Variants

Different Length OTP Variants Input OTP for React

Four-, six- and eight-digit code fields, each grouped for its length.

Framework
UI library

Codes come in different lengths: four-digit PINs, six-digit verification codes, eight-digit backup codes. This example shows all three, each labeled, with grouping that suits the length: four in one block, six as three and three, eight as four and four.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is each length set?

maxLength sets the length; render one InputOTPSlot per character.

How should I group each length?

Short codes read best in one block. Split longer ones in the middle, as here: three and three for six digits, four and four for eight, with an InputOTPSeparator between the groups.

How do the indexes work in the eight-digit field?

They count through the whole code, 0 to 7: 0 to 3 in the first group and 4 to 7 in the second.

How is each field labeled?

Each sits in its own Field with a FieldLabel: 4-Digit OTP, 6-Digit OTP and 8-Digit OTP. Each FieldLabel sets htmlFor to the id on its InputOTP.

Which length should I use?

Four digits for short-lived PINs, six for SMS and email codes, and longer ones for backup or recovery codes that are typed rarely and need more strength.

Do the fields stretch?

No. Each is as wide as its slots, so the eight-digit field is the widest. The fields are stacked with gap-6.

All 20 input otp examples