Digit Input

Collects a fixed-length verification or personal identification code.

DigitInput web component

Collects a fixed-length verification or personal identification code.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Input types

Choose numeric, alphanumeric, or alphabetic validation.

<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.

<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.

<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.

<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.

<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>

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

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

Behavior

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