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
components/digit-input.json
{
"name": "DigitInput",
"tagName": "noora-digit-input",
"elementClassName": "NooraDigitInput",
"className": "noora-digit-input",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Collects a fixed-length verification or personal identification code.",
"usage": "<noora-digit-input characters=\"6\" one-time-code></noora-digit-input>",
"attributes": [
{
"name": "type",
"property": "type",
"type": "string",
"values": ["alphanumeric", "numeric", "alphabetic"],
"default": "numeric",
"description": "Limits accepted characters."
},
{
"name": "characters",
"property": "characters",
"type": "number",
"default": 6,
"description": "Sets the number of fields."
},
{
"name": "placeholder",
"property": "placeholder",
"type": "string",
"default": "",
"description": "Sets each field placeholder."
},
{
"name": "one-time-code",
"property": "oneTimeCode",
"type": "boolean",
"default": false,
"description": "Enables one-time-code autofill."
},
{
"name": "error",
"property": "error",
"type": "boolean",
"default": false,
"description": "Shows the error state."
},
{
"name": "disabled",
"property": "disabled",
"type": "boolean",
"default": false,
"description": "Disables all fields."
},
{
"name": "value",
"property": "value",
"type": "string",
"default": "",
"description": "Gets or sets the combined value."
},
{
"name": "name",
"property": "name",
"type": "string",
"default": "",
"description": "Sets the hidden submitted field name."
}
],
"readonlyProperties": [],
"slots": [],
"cssParts": [
{
"name": "root",
"description": "The field group."
},
{
"name": "input",
"description": "Each character input."
}
],
"events": [
{
"name": "input",
"type": "InputEvent",
"description": "Emitted while the entered code changes."
},
{
"name": "change",
"type": "Event",
"description": "Emitted when every field contains a valid character."
},
{
"name": "noora-input",
"type": "CustomEvent<{ value: string }>",
"description": "Emitted with the current code after a valid input."
},
{
"name": "noora-complete",
"type": "CustomEvent<{ value: string }>",
"description": "Emitted when every field contains a valid character."
},
{
"name": "noora-invalid",
"type": "CustomEvent<{ value: string }>",
"description": "Emitted when an entered or pasted value is rejected."
}
],
"notes": [
"The component emits `noora-complete` when every field contains a character."
],
"examples": [
{
"id": "types",
"title": "Input types",
"description": "Choose numeric, alphanumeric, or alphabetic validation.",
"markup": "<noora-digit-input type=\"numeric\" characters=\"6\" placeholder=\"•\"></noora-digit-input>\n<noora-digit-input type=\"alphanumeric\" characters=\"4\" placeholder=\"•\"></noora-digit-input>\n<noora-digit-input type=\"alphabetic\" characters=\"3\" placeholder=\"•\"></noora-digit-input>"
},
{
"id": "character-counts",
"title": "Character counts",
"description": "Collect short, medium, and long codes.",
"markup": "<noora-digit-input characters=\"4\" placeholder=\"•\"></noora-digit-input>\n<noora-digit-input characters=\"6\" placeholder=\"•\"></noora-digit-input>\n<noora-digit-input characters=\"8\" placeholder=\"•\"></noora-digit-input>"
},
{
"id": "one-time-codes",
"title": "One-time codes",
"description": "Enable browser-assisted one-time-code entry.",
"markup": "<noora-digit-input characters=\"6\" one-time-code placeholder=\"•\"></noora-digit-input>\n<noora-digit-input characters=\"4\" one-time-code placeholder=\"0\"></noora-digit-input>"
},
{
"id": "states",
"title": "States",
"description": "Compare default, disabled, and error states.",
"markup": "<noora-digit-input characters=\"4\" placeholder=\"•\"></noora-digit-input>\n<noora-digit-input characters=\"4\" placeholder=\"•\" disabled></noora-digit-input>\n<noora-digit-input characters=\"4\" placeholder=\"•\" error></noora-digit-input>"
},
{
"id": "placeholders",
"title": "Placeholders",
"description": "Use dots, dashes, or empty fields.",
"markup": "<noora-digit-input characters=\"6\" placeholder=\"•\"></noora-digit-input>\n<noora-digit-input characters=\"6\" placeholder=\"-\"></noora-digit-input>\n<noora-digit-input characters=\"6\"></noora-digit-input>"
}
]
}