Segmented Input

This is a segmented input web component, written using Lit. It can be used, for instance, as input field for multi-factor authentication codes.

Features

• Once you enter a digit, the next input field is focused and awaits your input.
• When hitting the backspace key in an empty input field, the previous input field will be focused.
• When pasting a value, it will be spread over all available input fields.
• After all input fields are filled, a complete event containing the entered value is triggered.
• The number of digits is customizable.
• Can be used just like any regular form component.

Usage

With JavaScript

<segmented-input id="segmented-input"></segmented-input>

<script>
	const segmentedInput = document.getElementById('segmented-input');

	segmentedInput.addEventListener('complete', function (event) {
		console.log('Entered value: ' + event.detail);
	});
</script>

Within a HTML form

<form action="/check" method="post">
	<segmented-input name="code"></segmented-input>
	<button type="submit">Submit</button>
	<button type="reset">Reset</button>
</form>

Attributes

digits (default: 6)

The number of digits, the segmented input should contain.

<segmented-input digits="8"></segmented-input>

letters (default: false)

Control wether the segmented input should accept letters or not.

<segmented-input letters></segmented-input>