Input PIN

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

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.

Copy to clipboard 
  • <uk-input-pin name="PIN" uk-cloak></uk-input-pin>

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.

Copy to clipboard 
  • <uk-input-pin length="4" name="PIN" uk-cloak></uk-input-pin>

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 separated attribute to the <uk-input-pin> element. This will add gaps between each input, making it easier for users to distinguish between individual characters.

Copy to clipboard 
  • <uk-input-pin name="PIN" separated uk-cloak></uk-input-pin>

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.

Copy to clipboard 
  • <uk-input-pin disabled name="PIN" uk-cloak></uk-input-pin>

Error state

The Input PIN component is designed to integrate seamlessly with Franken UI. To indicate an error state in the form, simply add the error attribute. This will apply a “danger” state to the component, providing visual feedback to the user.

Copy to clipboard

  • This field is required.

  • <div class="space-y-1.5">
  <label class="uk-form-label uk-text-danger">PIN</label>
  <div class="uk-form-controls">
    <uk-input-pin error name="PIN" uk-cloak></uk-input-pin>
  </div>
  <p class="uk-form-help uk-text-danger">This field is required.</p>
</div>

Preventing layout shift

When loading Web Components, a brief delay may cause a flash of unstyled content. To mitigate this, add the uk-cloak attribute to hide the element until JavaScript loads. Setting a predefined height on the parent element can also prevent layout shift for a smoother experience.

<div class="h-9">
  <uk-input-pin uk-cloak>...</uk-input-pin>
</div>

Attributes

The following attributes are available for this component:

NameTypeDefaultDescription
autofocusBooleanfalseAutomatically focuses on the first input field when the component is rendered.
disabledBooleanfalseDisables all input fields, making the entire component read-only.
errorBooleanfalseApplies the uk-form-danger class when set to true, indicating an error state in the form.
lengthString6Specifies the number of input fields, determining the length of the PIN sequence.
nameStringDefines the name of the PIN input, allowing you to capture its value on your server.
separatedBooleanfalseEnables the separated input style, adding gaps between each input field.

Events

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

NameDescription
uk-input-pin:inputFired after the value has changed, providing an opportunity to respond to user input.
Customize