PinInput

The pin-input component.

Importing

Web

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

React

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

Component Usage

Web

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

React

<PinInput />

Properties

Name	Description	Type	Default Value
value	The current value of the input. It is always a string.	string	""
name	The HTML name to use in form submission.	string	""
disabled	Whether or not the element is disabled.	boolean	false
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	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
placeholder	Defines the text displayed in the input when it has no value. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder	string	""
autocomplete	Describes what, if any, type of autocomplete functionality the input should provide. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete	string	""
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
supporting-text	Conveys additional information below the text input, such as how it should be used.	string	""
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
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	""
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	Identifies the element (or elements) that labels the input. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby	string	""
hide-label	Whether to hide the label or not.	boolean	false
masked	Determines whether input values should be masked or not.	boolean	false
pins	The number of inputs. Defaults to 4.	number	4
pinlength	The number of each input's length. Defaults to 1.	number	1
type	Determines which values can be entered. Defaults to "alphanumeric".	"alphanumeric" | "numeric"	"alphanumeric"

Events

Name	Description	Type
complete	Fires when all the pins have values.	CompleteEvent

TIP

You can import custom event names:

Web

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

element.addEventListener(CompleteEvent.type, handleTapsiPinInputComplete);

React

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


// ...

<PinInput
  onCompleteEvent={(e: PinInputCompleteEvent) => {...}}
/>