Pin Input

Accessible one-time-password input (shadcn InputOTP look). One hidden text field captures typing and paste; the slots show the characters and a blinking caret.

Usage

@Local code: string = '';

SPinInput({ value: this.code!!, onComplete: (v: string) => this.completed = v })
Text(`value = ${this.code}`)

Approximate web preview — the HarmonyOS rendering is the reference.

Groups, mask & pattern

Slots shrink (36 → 28vp) when space is tight.

SPinInput({ length: 6, groups: [3, 3] })
SPinInput({ length: 4, masked: true })
SPinInput({ length: 6, pattern: 'alphanumeric', invalid: true })
SPinInput({ length: 4, defaultValue: '12', disabled: true })

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SPinInput

shadcn InputOTP look (shadcn-vue PinInput): joined h-9 w-9 slots with a shared border, the active slot gets border-ring ring-ring/50 ring-[3px] and a blinking caret.

One transparent TextInput laid over the slots captures typing / paste / backspace (tapping anywhere opens the keyboard); the slots only render the characters. Slots shrink from 36 to 28vp when the component's own width is too small.

Prop	Type	Default	Description
length	number	6
value!!	string | undefined	undefined	Controlled value (use with !!). Leave undefined for uncontrolled.
defaultValue	string	''
masked	boolean	false	Show • instead of the characters (shadcn-vue mask; renamed: mask is a universal attribute).
pattern	PinPattern PinPattern = 'digits' | 'alphanumeric'	'digits'
groups	number[] | undefined	undefined	Slot groups separated by a dash, e.g. [3, 3]; must add up to length.
disabled	boolean	false
invalid	boolean	false
label	ResourceStr	$r('app.string.spark_one_time_code')	Accessible name.

Event	Type	Default	Description
onValueChange	(v: string) => void	() => { }
onComplete	(v: string) => void	() => { }	Fired when all slots are filled.