DigitInput

Collects a fixed-length verification or personal identification code.

html

<noora-digit-input characters="6" one-time-code></noora-digit-input>

Attributes

Attribute	Type or allowed values	Default	Description
`type`	`alphanumeric`, `numeric`, `alphabetic`	`"numeric"`	Limits accepted characters.
`characters`	`number`	`6`	Sets the number of fields.
`placeholder`	`string`	`""`	Sets each field placeholder.
`one-time-code`	`boolean`	`false`	Enables one-time-code autofill.
`error`	`boolean`	`false`	Shows the error state.
`disabled`	`boolean`	`false`	Disables all fields.
`value`	`string`	`""`	Gets or sets the combined value.
`name`	`string`	`""`	Sets the hidden submitted field name.

Events

Event	Type	Description
`input`	`InputEvent`	Emitted while the entered code changes.
`change`	`Event`	Emitted when every field contains a valid character.
`noora-input`	`CustomEvent<{ value: string }>`	Emitted with the current code after a valid input.
`noora-complete`	`CustomEvent<{ value: string }>`	Emitted when every field contains a valid character.
`noora-invalid`	`CustomEvent<{ value: string }>`	Emitted when an entered or pasted value is rejected.

Styling parts

Part	Description
`root`	The field group.
`input`	Each character input.

The component emits noora-complete when every field contains a character.

Input types

Choose numeric, alphanumeric, or alphabetic validation.

html

<noora-digit-input type="numeric" characters="6" placeholder="•"></noora-digit-input>
<noora-digit-input type="alphanumeric" characters="4" placeholder="•"></noora-digit-input>
<noora-digit-input type="alphabetic" characters="3" placeholder="•"></noora-digit-input>

Character counts

Collect short, medium, and long codes.

html

<noora-digit-input characters="4" placeholder="•"></noora-digit-input>
<noora-digit-input characters="6" placeholder="•"></noora-digit-input>
<noora-digit-input characters="8" placeholder="•"></noora-digit-input>

One-time codes

Enable browser-assisted one-time-code entry.

html

<noora-digit-input characters="6" one-time-code placeholder="•"></noora-digit-input>
<noora-digit-input characters="4" one-time-code placeholder="0"></noora-digit-input>

States

Compare default, disabled, and error states.

html

<noora-digit-input characters="4" placeholder="•"></noora-digit-input>
<noora-digit-input characters="4" placeholder="•" disabled></noora-digit-input>
<noora-digit-input characters="4" placeholder="•" error></noora-digit-input>

Placeholders

Use dots, dashes, or empty fields.

html

<noora-digit-input characters="6" placeholder="•"></noora-digit-input>
<noora-digit-input characters="6" placeholder="-"></noora-digit-input>
<noora-digit-input characters="6"></noora-digit-input>