Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
docs/components/digitinput.md
<!-- 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>
```