Input OTP

Use bo-input-otp for short verification codes. It supports individual entry, arrow-key navigation, and paste.

Usage

Verification code

Enter the code sent to your email.

Waiting for code

<bo-input-otp>
  v-model="code"
  :length="6"
  label="Verification code"
  hint="Enter the code sent to your email."
  @complete="completed = $event"
/>

Password mode

Set type="password" when entered characters should be hidden.

Recovery code

<bo-input-otp v-model="code" type="password" :length="4" label="Recovery code" />

API

Prop / event	Type	Default	Description
id / dataTestId	string	autogenerated	Root and cell attributes.
modelValue	string	''	Complete string used by v-model.
length	number	6	Number of cells.
type	text | password	text	Whether entered characters are hidden.
pattern / inputMode	string / native input mode	[0-9] / numeric	Character validation and keyboard hint.
name	string	-	Hidden native form field name.
label / description / error / hint	string	-	Field messaging.
required / disabled / readOnly / autofocus	boolean	false	Input states and initial focus.
role / ariaLabel / ariaLabelledBy / ariaDescribedBy	native accessibility types	group / -	Group and cell semantics.
update:modelValue	event	-	Emitted when the code changes.
complete	(value: string) event	-	Emitted when every cell has a value.
focus / blur	event	-	Emitted by the individual cells.
focus	exposed method	-	Focuses the first cell.