OTP Input
One-time-passcode slots in two variants — boxed and boxless (underline) — each across five states. 48px slots, Plus Jakarta Sans Medium 18px.
Variants & States
A single slot in both variants: Empty, Filled, Focus, Error, Disabled. Focus re-themes to lime in dark mode.
BoxedBoxless
Empty
0
Filled
1
1
Focus
1
1
Error
1
1
Disabled
0
0
6-digit code
Six slots, 8px gap. Both variants across states.
Boxed
Filled
1
2
3
4
5
6
Focus (entering)
1
2
3
Error
1
2
3
4
5
6
Incorrect code, try again
Disabled
0
0
0
0
0
0
Boxless
Filled
1
2
3
4
5
6
Focus (entering)
1
2
3
0
0
0
Error
1
2
3
4
5
6
Incorrect code, try again
Disabled
0
0
0
0
0
0
4-digit code
Same slots, four positions.
Boxed
Filled
1
2
3
4
Focus (entering)
1
2
Error
1
2
3
4
Boxless
Filled
1
2
3
4
Focus (entering)
1
2
0
0
Error
1
2
3
4
Interactive
Type to fill the boxed variant. Auto-advances; backspace steps back; paste is supported.
Code: —
Token Reference
| Token | Value | Usage |
|---|---|---|
| --OTP/default/outline-box | #cccccc | Empty border |
| --OTP/active/outline-box-active | #191919 | Filled border + text |
| --OTP/focus/outline-box | #352eff | Focus border/underline (→ lime in dark) |
| --input-field/error/outline-box | #ff0000 | Error border/underline/message |
| --OTP/disabled/bg-box-disabled | #efefef | Disabled fill |
| Slot · Radius · Font | 48px · 4px · PJS Medium 18px | Dimensions |