Security code

SecurityCodeControl

One box per character for verification codes and PINs, with a callback when the last box is filled.

Overview

SecurityCodeControl renders Length single-character inputs and joins them into one string bound through Value. OnComplete fires when every box holds a character. Type="Numeric" rejects anything but digits and uses type="tel", so phones show the number pad. Each box is an ordinary input: Tab or a click moves between them, a character fills a box and Backspace clears it. The control does not move focus on its own and does not split a pasted code across the boxes.

Examples

#Verification code

Six digits, checked in OnComplete. Fill the boxes in order with Tab between them; the demo code is 492018. Clear resets the bound value, which empties every box.

Example

Razor

We sent a code to +1 (425) ••• 0142. Enter it to continue.

0 of 6 digits entered

Documentation

SecurityCodeControl parameters

Parameter	Type	Default	Description
`Value`	`string?`	`null`	The joined characters. Two-way with `@bind-Value`; a cleared middle box leaves a space.
`ValueChanged`	`EventCallback<string?>`	—	Fires after every keystroke that changes a box.
`Length`	`int`	`6`	Number of boxes.
`Type`	`SecurityCodeControl.SecurityCodeType`	`Numeric`	`Numeric` accepts digits only and renders `type="tel"`; `AlphaNumeric` accepts any character.
`OnComplete`	`EventCallback<string>`	—	Fires with the full code once every box is filled, after `ValueChanged`.
`Disabled`	`bool`	`false`	Disables every box and greys the host. The base `Enabled` is not read by this control.
`CssClass / Style (base)`	`string?`	`null`	On the host element. The base `Visible` is not applied.
`(unmatched attributes)`	`Dictionary<string,object>`	—	Forwarded to the host `<div>`, not to the boxes.

SecurityCodeType (nested enum)

Property	Type	Default	Description
`Numeric`		—	Digits 0–9; other characters are ignored.
`AlphaNumeric`		—	Any single character per box; no case folding.

CSS classes

Class	Effect
`fx-security-code-host · .disabled`	Inline flex row, 0.5rem gap; `disabled` greys the boxes and sets `cursor: not-allowed`.
`fx-security-code-cell`	Each box: 42×48px, bold 1.25rem text, 2px border; focus turns the border blue with a 3px ring.

Colors are fixed in the control's stylesheet; it reads no --fx-* variables. Restyle by overriding these classes.

Keyboard and accessibility

Keyboard

Key	Action
`Tab / Shift+Tab`	Move to the next or previous box. The control does not move focus itself.
`Character`	Fills the box. In `Numeric` mode only digits are accepted.
`Backspace`	Clears the box; focus stays.
`Arrow keys`	Not handled; the caret moves inside the single-character box.

The boxes are plain inputs with maxlength="1" and no accessible name of their own. Put a visible instruction before the control, as above.
The host is a <div> without a role; unmatched attributes such as id or data-* land on it.
Numeric boxes are type="tel", alphanumeric boxes type="text". A non-digit typed into a numeric box is ignored.
Clearing a middle box leaves a gap in Value (a space), so OnComplete waits until that box is filled again.