PinInput

PinInput

{/* SMS verification code */}
<PinInput
  length={6}
  label="Verification code"
  description="Sent to ＋82 ····-1234"
  autoFocus
  onComplete={async (code) => { await verify(code); }}
/>

{/* Masked 4-digit PIN */}
<PinInput length={4} mask label="Enter PIN" />

Install: @helixui/core

import { PinInput } from '@helixui/core'

status: stable · since: 0.5.0

Tags: otp, pin, verification, sms

Anatomy

[ _ ][ _ ][ _ ][ _ ][ _ ][ _ ]   ← 6-digit code

Layout

• display — inline-flex
• width — content
• height — content
• intrinsicSize — ~44-56px tall, hugs N cells
• stackable — false
• fullBleed — false

Visual

A row of single-character cells with auto-advance, paste-to-fill, backspace-to-previous, and SMS one-time-code autofill on iOS/Android.

Props

Name	Type	Default	Description
length	number	6	Number of cells.
value	string	—	Controlled value.
defaultValue	string	—	Uncontrolled initial.
onChange	(value: string) => void	—	Change handler.
onComplete	(value: string) => void	—	Called once when the last cell is filled.
pattern	'digits' | 'alphanumeric'	digits	Allowed character set.
mask	boolean	false	Mask the value (for PINs).
isInvalid	boolean	false	Invalid styling.
isDisabled	boolean	false	Disable all cells.
label	ReactNode	—	Label above the cells.
description	ReactNode	—	Helper text.
errorMessage	ReactNode	—	Error text. Implies isInvalid.
size	'sm' | 'md' | 'lg'	md	Cell size.
autoFocus	boolean	false	Focus the first cell on mount.

Tokens used

color.bg.surface.default, color.bg.surface.muted, color.bg.action.brand.default, color.border.default, color.border.focus, color.border.danger, color.text.primary, color.text.secondary, color.text.action.danger, radius.md, space.2, font.family.sans, font.size.sm, font.size.md, font.size.xl, font.size.2xl, font.weight.medium, font.weight.semibold

Accessibility

Notes

• First cell has autocomplete="one-time-code" so iOS / Android can offer SMS code autofill.
• inputMode="numeric" on digit-only mode brings up the numeric keypad on mobile.
• Error message has role="alert".

Composes with

Component	Relation	Note
NumericKeypad	sibling	Pair on mobile when system keyboard is undesired.
Field	wraps	Wrap with Field for label/error.
TextInput	sibling
Stepper	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

verify SMS code

“6-digit OTP input”

<PinInput length={6} value={code} onChange={setCode} />

Related

• TextInput
• NumericKeypad
• Stepper