Pin Input

Used to capture a pin code or otp from the user.

Importing

To use the pin input component, first you need to register the component inside the page. You can register the component manually by importing the register function:

Web (Option 1)

import { register } from "@tapsioss/web-components/pin-input";

register(); // Now the pin input component is ready to use!

Web (Option 2)

import { registerPinInput } from "@tapsioss/web-components";

registerPinInput(); // Now the pin input component is ready to use!

Also you can automatically register the component by importing it with the following approach:

Web

import "@tapsioss/web-components/pin-input/element";

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

import { registerAll } from "@tapsioss/web-components";

registerAll(); // All the components are now available

In the React package, you can easily add the component using the following code:

React

import { PinInput } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-pin-input></tapsi-pin-input>

React

<PinInput />

Properties

Name	Attribute Name	Description	Type	Default Value
required	required	Indicates that the user must specify a value for the input before the owning form can be submitted and will render an error state when reportValidity() is invoked when value is empty. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required	boolean	false
readOnly	readonly	Indicates whether or not a user should be able to edit the input's value. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly	boolean	false
label	label	The label of the input. - If the hideLabel property is true, the label will be hidden visually but still accessible to screen readers. - Otherwise, a visible label element will be rendered. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label	string	""
labelledBy	labelledby	Identifies the element (or elements) that labels the input. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby	string	""
hideLabel	hide-label	Whether to hide the label or not.	boolean	false
placeholder	placeholder	Defines the text displayed in the inputs when they have no value. Provides a brief hint to the user as to the expected type of data that should be entered into the control. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder	string	""
autocomplete	autocomplete	Describes what, if any, type of autocomplete functionality the input should provide. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete	AutoFill	""
autofocus	autofocus	Indicates that the element should be focused on page load. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus	boolean	false
supportingText	supporting-text	Conveys additional information below the input, such as how it should be used.	string	""
error	error	Gets or sets whether or not the text input is in a visually invalid state. This error state overrides the error state controlled by reportValidity().	boolean	false
errorText	error-text	The error message that replaces supporting text when error is true. If errorText is an empty string, then the supporting text will continue to show. This error message overrides the error message displayed by reportValidity().	string	""
type	type	Determines which values can be entered.	"numeric" | "alphanumeric"	"alphanumeric"
masked	masked	Determines whether input values should be masked or not.	boolean	false
pins	pins	The number of inputs.	number	4
pinLength	pin-length	The number of each input's length.	number	1
value	value	The current value of the input. It is always a string.	string	""
valueAsArray	-	The value as an array.	string[]	-
displayValue	-	Retrieves or sets the function used to display values on inputs.	(value: string) => string	-

Methods

Name	Description	Parameters
reset	Reset the input to its default value.

Events

Name	Description	Type	Bubbles	Cancelable
complete	Fires when all the pins have values.	CompleteEvent	❌	❌
change	Fires when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.	Event	✅	❌
input	Fires when the value of an input element has been changed as a direct result of a user action.	Event	✅	❌

TIP

Event details are available as JavaScript variables:

// Option 1
import {
 CompleteEvent
} from "@tapsioss/web-components/pin-input";

// Option 2
import {
 PinInputCompleteEvent
} from "@tapsioss/web-components";

You can have access to the event name using the type property:

// Option 1
element.addEventListener(CompleteEvent.type, handleComplete);

// Option 2
element.addEventListener(PinInputCompleteEvent.type, handleComplete);