Input PIN

Allows users to input a sequence of one-character alphanumeric inputs.

Table of contents

• Usage
• Capturing values
• Customize length
• Separated input
• Size modifiers
• Disable input
• Error state
• Preventing layout shift
• Attributes
• Events

Usage

The Input PIN component is a web component built from scratch to allow users to input a sequence of one-character alphanumeric inputs. This is particularly useful in scenarios such as:

• Entering a verification code sent via SMS or email
• Authenticating with a two-factor authentication system
• Creating a secure password or passphrase

To get started, simply use the <uk-input-pin> markup in your HTML code.

Capturing values

There are several ways to capture values from the <uk-input-pin> component. The simplest approach is to add a name attribute to the component. When you do this, a hidden input field with the specified name will be automatically generated, allowing you to easily capture the selected value on your server.

Customize length

By default, the Input PIN component is set to accept 6 characters. However, you can easily customize this by adding the length attribute to the <uk-input-pin> element. Simply specify the desired length as a numerical value, and the component will automatically adjust to accommodate the specified number of inputs.

Separated input

By default, the input fields in the Input PIN component are displayed adjacent to each other. To add visual separation between each input, simply add the .uk-input-pin-separated class to the cls-custom attribute. This will add gaps between each input, making it easier for users to distinguish between individual characters.

Size modifiers

There are several size modifiers available. Just add one of the following classes to the cls-custom attribute to make the input smaller or larger.

Class	Description
.uk-form-xs	Applies extra small size.
.uk-form-sm	Applies small size.
.uk-form-md	Applies medium size.
.uk-form-lg	Applies large size.

Disable input

To prevent user input, add the disabled attribute to the <uk-input-pin> element. This will disable all input fields, making it impossible for users to enter or modify the PIN sequence.

Error state

To indicate an error state in the form, simply add the .uk-form-destructive class to the cls-custom attribute. This will apply a “destructive” state to the component, providing visual feedback to the user.

Preventing layout shift

When loading Web Components, there may be a brief delay before the content is fully rendered. This can result in a flash of unstyled content or unprocessed templates. To mitigate this issue, consider setting a predefined height on the parent element to prevent layout shift and ensure a smooth user experience.

Attributes

The following attributes are available for this component:

Name	Type	Default	Description
autofocus	Boolean	false	Automatically focuses on the first input field when the component is rendered.
cls-custom	String		Allows you to add custom CSS classes.
disabled	Boolean	false	Disables all input fields, making the entire component read-only.
length	String	6	Specifies the number of input fields, determining the length of the PIN sequence.
name	String		Defines the name of the PIN input, allowing you to capture its value on your server.

Events

The Input PIN component triggers the following events on elements with this component attached:

Name	Description
uk-input-pin:input	Fired after the value has changed, providing an opportunity to respond to user input.