Pin Input

SPinInput is a code input split into cells (OTP, PIN, a code from a text message). It is built on Reka UI (auto-advance between cells, pasting the whole code, keyboard control) and reuses SFormField for the label, hint, error message and a11y wiring. The value is an array of characters bound with v-model.

Basic usage

Masked input

mask hides the characters — for secret PIN codes.

States

required marks the field as required, error shows an error message and makes the field invalid (explicit invalid does the same), disabled blocks input.

OTP and placeholder

otp enables autofill of a code from a text message on mobile devices, and placeholder sets the filler character for empty cells.

prepend / append slots

The slots put arbitrary content next to the code cells — an icon or a caption.

API

Props

Name	Type	Default	Description
id	string	undefined	Control id. Generated automatically when not set (SSR-safe).
label	string	undefined	Field label.
hint	string	undefined	Hint below the field.
error	string	undefined	Error message. When set, the field is marked invalid.
invalid	boolean	false	Explicitly marks the field invalid (in addition to error).
square	boolean	undefined	Square corners: removes the cell border radius (rounded by default).
required	boolean	false	Marks the field as required.
disabled	boolean	false	Disables input.
length	number	4	Number of code cells.
type	"number" | "text"	"text"	Input type: text or number (digits only).
mask	boolean	false	Hides the entered characters (for secret codes).
otp	boolean	false	One-time code (OTP) mode: autofill from SMS or the clipboard on mobile.
placeholder	string	undefined	Placeholder character for empty cells.
model-value	string[]	[]	The entered code as an array of characters, one per cell. Two-way bound via v-model. With type="number", Reka puts numbers into the elements at runtime, so convert values to the type you need when reading them (String(v) / Number(v)).

Events

Name	Signature	Description
update:modelValue	(value: string[]) => void	Emitted when modelValue changes. Used for two-way binding (v-model).

Slots

Name	Description
prepend	Content at the start of the field, inside the border (icon, button).
append	Content at the end of the field, inside the border (icon, button).