<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->

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