Pin

npm2.0.0

PIN input component for entering verification codes and PINs with auto-advance and paste support

Example

Verification Code

Enter the 6-digit code sent to your phone

code

<script type="module">
  import '@blueprintui/components/include/pin.js';
</script>

<bp-field>
  <label>Verification Code</label>
  <bp-pin length="6"></bp-pin>
  <bp-field-message>Enter the 6-digit code sent to your phone</bp-field-message>
</bp-field>

Vertical

4-digit PIN

Default 4-digit PIN

6-digit Verification Code

Enter the 6-digit code

Disabled

Disabled PIN input

Error

Invalid code entered

Success

Code verified successfully

code

<bp-form-group layout="vertical">
  <bp-field>
    <label>4-digit PIN</label>
    <bp-pin length="4"></bp-pin>
    <bp-field-message>Default 4-digit PIN</bp-field-message>
  </bp-field>

  <bp-field>
    <label>6-digit Verification Code</label>
    <bp-pin length="6"></bp-pin>
    <bp-field-message>Enter the 6-digit code</bp-field-message>
  </bp-field>

  <bp-field>
    <label>Disabled</label>
    <bp-pin length="6" disabled value="123456"></bp-pin>
    <bp-field-message>Disabled PIN input</bp-field-message>
  </bp-field>

  <bp-field status="error">
    <label>Error</label>
    <bp-pin length="6"></bp-pin>
    <bp-field-message status="error">Invalid code entered</bp-field-message>
  </bp-field>

  <bp-field status="success">
    <label>Success</label>
    <bp-pin length="6" value="123456"></bp-pin>
    <bp-field-message status="success">Code verified successfully</bp-field-message>
  </bp-field>
</bp-form-group>

Horizontal

4-digit PIN

Default 4-digit PIN

6-digit Verification Code

Enter the 6-digit code

Disabled

Disabled PIN input

Error

Invalid code entered

Success

Code verified successfully

code

<bp-form-group layout="horizontal">
  <bp-field>
    <label>4-digit PIN</label>
    <bp-pin length="4"></bp-pin>
    <bp-field-message>Default 4-digit PIN</bp-field-message>
  </bp-field>

  <bp-field>
    <label>6-digit Verification Code</label>
    <bp-pin length="6"></bp-pin>
    <bp-field-message>Enter the 6-digit code</bp-field-message>
  </bp-field>

  <bp-field>
    <label>Disabled</label>
    <bp-pin length="6" disabled value="123456"></bp-pin>
    <bp-field-message>Disabled PIN input</bp-field-message>
  </bp-field>

  <bp-field status="error">
    <label>Error</label>
    <bp-pin length="6"></bp-pin>
    <bp-field-message status="error">Invalid code entered</bp-field-message>
  </bp-field>

  <bp-field status="success">
    <label>Success</label>
    <bp-pin length="6" value="123456"></bp-pin>
    <bp-field-message status="success">Code verified successfully</bp-field-message>
  </bp-field>
</bp-form-group>

Compact

4-digit PIN

Default 4-digit PIN

6-digit Verification Code

Enter the 6-digit code

Disabled

Disabled PIN input

Error

Invalid code entered

Success

Code verified successfully

code

<bp-form-group layout="compact">
  <bp-field>
    <label>4-digit PIN</label>
    <bp-pin length="4"></bp-pin>
    <bp-field-message>Default 4-digit PIN</bp-field-message>
  </bp-field>

  <bp-field>
    <label>6-digit Verification Code</label>
    <bp-pin length="6"></bp-pin>
    <bp-field-message>Enter the 6-digit code</bp-field-message>
  </bp-field>

  <bp-field>
    <label>Disabled</label>
    <bp-pin length="6" disabled value="123456"></bp-pin>
    <bp-field-message>Disabled PIN input</bp-field-message>
  </bp-field>

  <bp-field status="error">
    <label>Error</label>
    <bp-pin length="6"></bp-pin>
    <bp-field-message status="error">Invalid code entered</bp-field-message>
  </bp-field>

  <bp-field status="success">
    <label>Success</label>
    <bp-pin length="6" value="123456"></bp-pin>
    <bp-field-message status="success">Code verified successfully</bp-field-message>
  </bp-field>
</bp-form-group>

Masked

Masked PIN (password)

PIN is masked like a password

Visible PIN

PIN is visible

code

<bp-form-group layout="vertical">
  <bp-field>
    <label>Masked PIN (password)</label>
    <bp-pin length="4" mask></bp-pin>
    <bp-field-message>PIN is masked like a password</bp-field-message>
  </bp-field>

  <bp-field>
    <label>Visible PIN</label>
    <bp-pin length="4"></bp-pin>
    <bp-field-message>PIN is visible</bp-field-message>
  </bp-field>
</bp-form-group>

Types

Numeric (default)

Only numbers allowed

Text (alphanumeric)

Letters and numbers allowed

With Pattern (uppercase only)

Uppercase letters and numbers only

code

<bp-form-group layout="vertical">
  <bp-field>
    <label>Numeric (default)</label>
    <bp-pin length="6" type="number"></bp-pin>
    <bp-field-message>Only numbers allowed</bp-field-message>
  </bp-field>

  <bp-field>
    <label>Text (alphanumeric)</label>
    <bp-pin length="6" type="text"></bp-pin>
    <bp-field-message>Letters and numbers allowed</bp-field-message>
  </bp-field>

  <bp-field>
    <label>With Pattern (uppercase only)</label>
    <bp-pin length="6" type="text" pattern="[A-Z0-9]"></bp-pin>
    <bp-field-message>Uppercase letters and numbers only</bp-field-message>
  </bp-field>
</bp-form-group>

Lengths

4-digit

6-digit

8-digit

code

<bp-form-group layout="vertical">
  <bp-field>
    <label>4-digit</label>
    <bp-pin length="4"></bp-pin>
  </bp-field>

  <bp-field>
    <label>6-digit</label>
    <bp-pin length="6"></bp-pin>
  </bp-field>

  <bp-field>
    <label>8-digit</label>
    <bp-pin length="8"></bp-pin>
  </bp-field>
</bp-form-group>

Readonly

Read-only PIN

This PIN cannot be edited

code

<bp-field>
  <label>Read-only PIN</label>
  <bp-pin length="6" readonly value="123456"></bp-pin>
  <bp-field-message>This PIN cannot be edited</bp-field-message>
</bp-field>

Custom Styling

Default Styling

Custom Large

Compact

code

<style>
  .custom-pin {
    --gap: var(--bp-space-400);
    --width: 3.5rem;
    --height: 3.5rem;
    --font-size: var(--bp-text-size-600);
    --border-radius: var(--bp-object-border-width-400);
  }

  .compact-pin {
    --gap: var(--bp-space-200);
    --width: 2.5rem;
    --height: 2.5rem;
    --font-size: var(--bp-text-size-400);
  }
</style>

<bp-form-group layout="vertical">
  <bp-field>
    <label>Default Styling</label>
    <bp-pin length="6"></bp-pin>
  </bp-field>

  <bp-field>
    <label>Custom Large</label>
    <bp-pin length="6" class="custom-pin"></bp-pin>
  </bp-field>

  <bp-field>
    <label>Compact</label>
    <bp-pin length="6" class="compact-pin"></bp-pin>
  </bp-field>
</bp-form-group>

Events

Enter PIN

Start entering digits...

code

<script type="module">
  const pin = document.querySelector('#event-pin');
  const output = document.querySelector('#event-output');

  pin.addEventListener('input', (e) => {
    output.textContent = 'Input: ' + e.target.value;
  });

  pin.addEventListener('complete', (e) => {
    output.textContent = 'Complete: ' + e.detail.value;
    console.log('PIN complete:', e.detail.value);
  });
</script>

<bp-field>
  <label>Enter PIN</label>
  <bp-pin id="event-pin" length="6"></bp-pin>
  <bp-field-message id="event-output">Start entering digits...</bp-field-message>
</bp-field>

Form Integration

code

<script type="module">
  const form = document.querySelector('#pin-form');
  const result = document.querySelector('#form-result');

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    result.textContent = 'Submitted PIN: ' + formData.get('verification-code');
  });
</script>

<form id="pin-form">
  <bp-field validate>
    <label>Verification Code</label>
    <bp-pin name="verification-code" length="6" required></bp-pin>
    <bp-field-message>Enter all 6 digits to submit</bp-field-message>
  </bp-field>
  <bp-button type="submit" style="margin-top: var(--bp-space-300)">Verify</bp-button>
  <p id="form-result" style="margin-top: var(--bp-space-300)"></p>
</form>

Paste Support

Try Pasting a Code

Copy "123456" and paste into the first field

code

<bp-field>
  <label>Try Pasting a Code</label>
  <bp-pin length="6"></bp-pin>
  <bp-field-message>Copy "123456" and paste into the first field</bp-field-message>
</bp-field>

Install

NPM

// npm package
import '@blueprintui/components/include/pin.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/pin.js/+esm';
</script>

Accessibility

The password input component should be keyboard accessible
It should have clear and descriptive labels for accessibility screen readers
It should have a visible focus state to indicate its interactivity

bp-pin

Events

Name	Types	Description
`complete`	`CustomEvent<{value: string}>`	fires when all fields are filled
`input`	`InputEvent`	occurs when any field value changes
`change`	`InputEvent`	occurs when the complete value changes

Properties

Name	Types	Description
`length`	`number`	Number of input fields (typically 4-8)
`type`	`string`	Input type for each field
`value`	`string \| number \| FormData \| File`	Complete pin value
`mask`	`boolean`	Obscure input like password fields
`placeholder`	`string`	Placeholder for empty fields
`focus`
`reset`
`disabled`	`boolean`	determines if element is mutable or focusable
`required`	`boolean`	indicates that the user must specify a value for the input before the owning form can be submitted
`readonly`	`boolean`	makes the element not mutable, meaning the user can not edit the control
`multiple`	`boolean`	determines he form control accepts one or more values
`autocomplete`	`string`	provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
`formNoValidate`	`boolean`	determines if the form control is novalidate
`name`	`string`	represents the name of the current element as a string.
`pattern`	`string`	regular expression the form control's value should match
`minLength`	`number`	defines minimum number of characters
`maxLength`	`number`	defines maximum number of characters
`min`	`number`	defines the most negative value in the range of permitted values
`max`	`number`	defines the greatest value in the range of permitted values
`size`	`number`	determines number of characters
`formAssociated`	`boolean`
`valueAsNumber`
`composedLabel`

Attributes

Name	Types	Description
`length`	`number`	Number of input fields (typically 4-8)
`type`	`string`	Input type for each field
`value`	`string \| number \| FormData \| File`	Complete pin value
`mask`	`boolean`	Obscure input like password fields
`placeholder`	`string`	Placeholder for empty fields
`disabled`	`boolean`	determines if element is mutable or focusable
`required`	`boolean`	indicates that the user must specify a value for the input before the owning form can be submitted
`readonly`	`boolean`	makes the element not mutable, meaning the user can not edit the control
`multiple`	`boolean`	determines he form control accepts one or more values
`autocomplete`	`string`	provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
`formNoValidate`	`boolean`	determines if the form control is novalidate
`pattern`	`string`	regular expression the form control's value should match
`minLength`	`number`	defines minimum number of characters
`maxLength`	`number`	defines maximum number of characters
`min`	`number`	defines the most negative value in the range of permitted values
`max`	`number`	defines the greatest value in the range of permitted values
`size`	`number`	determines number of characters

CSS Properties

Name	Types	Description
`--gap`		space between input fields
`--width`		width of each input field
`--height`		height of each input field
`--font-size`		font size for input text
`--border`		border styling
`--border-radius`		corner rounding
`--background`		background color
`--color`		text color