One-Time Password

🧭 When to Use OTP

Use the OTP component when:

• You're collecting short secure codes (e.g., 4-digit PIN, 6-digit SMS code)

• You want a clear, focused experience for code input

• Code entry should allow tabbing, auto-focus, and field-by-field control

Avoid using OTP components for long input strings — use text fields or password inputs in those cases.

🔲 OTP Item (Single Input Box)

Each OTP character is entered into a separate box. These OTP Items support different appearances and interaction states.

🎯 Status Variants

• Default – Resting state

• Hover – Subtle outline or shadow to indicate interactivity

• Focus – Strong border or highlight to guide input

• Filled – A character has been entered

• Error – Used when the code is invalid or expired

Each status is tokenized and styled consistently across the system for accessibility.

🎨 OTP Item Types

These control the visual shape or boundary of each character box:

• Empty – No visible outline; background-only

• Round – Fully rounded boxes for a soft, modern look

• Border – Solid border around each item

• Underline – Only an underline; minimal, form-field feel

Choose based on your product’s tone and brand.

📏 OTP Item Sizes

• Small (sm) – Compact; ideal for mobile

• Medium (md) – Default

• Large (lg) – Emphasized for touch-friendly designs

• Extra Large (xl) – High-contrast or hero layout versions

Size affects box dimensions, spacing, font size, and alignment.

🧩 OTP (Composite Component)

The full OTP component includes a sequence of OTP Items styled together as a group.

🎨 OTP Types (System Styles)

• Round – Rounded container + rounded items

• Square – Boxy layout with sharp corners

• Border Bottom – Minimal style with only bottom borders visible

These types control the overall aesthetic and can be selected based on context (e.g., default = square, mobile = round).

🎨 Background Variants

• Default – Neutral background; most common use

• Filled – Adds a background fill to each box for stronger visibility and depth

Backgrounds can be paired with any shape or size style, and toggled in Figma via variants.

🔄 Behavior & Interactions

• Auto-tab to next field on input

• Backspace to move to previous field

• Submit automatically when all fields are filled

• Show error state across all fields when needed

• Optional masking (e.g., bullets or asterisks) for security-sensitive codes

All fields are keyboard accessible and laid out using auto layout tokens for proper spacing and scaling.

♿ Accessibility Considerations

From a design perspective:

• Keep focus states clear and legible

• Ensure all sizes have enough spacing and minimum tap area

• Use consistent error messaging, colors, and placement

From a code perspective (if implemented):

• Use <input> fields with maxlength="1"

• Apply aria-label="OTP digit 1 of 6" for screen readers

• Use aria-invalid="true" when validation fails

• Consider adding autocomplete="one-time-code" to support mobile autofill

✅ Best Practices

• Always communicate the number of digits expected (e.g., “Enter 6-digit code”)

• Use auto-focus and auto-tab to improve experience

• Mask codes only if needed for security — otherwise show input

• Provide a fallback input method if autofill fails

• Use filled or border variants when high visibility is needed (e.g., in dark mode)