input-pincode v1.0.5

Input Pincode Web Component

The input-pincode is a customizable web component designed to capture multi-character input such as a PIN code. It supports various customization options like length, only-numbers mode, initial focus, and error handling.

Keyboard Navigation

Backspace: Deletes the content of the current input and moves to the previous input. Arrow Keys: Navigate between the input fields. Enter: Triggers the onEnter event if the pincode is completed.

Pasting Functionality

You can paste a pincode (e.g., 1234) directly into the component, and the input fields will automatically be populated.

Props

Installation

Install via npm or yarn:

npm install input-pincode

Or with yarn:

yarn add input-pincode

Usage

Include the web component in your HTML or React project:

HTML

<input-pincode length="4" only-numbers initialize-input-focus></input-pincode>

REACT

import { InputPincode } from 'input-pincode/react';

<InputPincode length={4} onlyNumbers={true} initializeInputFocus={true} />

Events

Change: Dispatched when the value of the pincode changes. The event details include the isCompleted and value properties:

Enter: Fired when the Enter key is pressed, dispatching the pincode value and its completion status.

element.addEventListener('Change', (e) => {
    const { isCompleted, value } = e.detail;
    console.log('Pincode is complete:', isCompleted);
    console.log('Pincode value:', value);
});

API

General CSS Customization

You can customize the appearance of the entire component by modifying the default variables. These variables affect the overall look of the pincode input fields, regardless of their state.

In addition to the default variables, you can customize the appearance of the component for specific states: valid, has-error, and disabled. Each state has a corresponding variable suffix, such as --valid, --has-error, or --disabled, allowing for more granular control over the styles.

List of CSS Variables

State-Specific Variables

Valid State (--valid)

... etc

Error State (--has-error)

...etc

Disabled State (--disabled)

...etc

Usage Example

Default Customization

input-pincode {
    --wc-input-pincode--border-color: #0000ff;
    --wc-input-pincode--font-size: 1.5rem;
}

State-Specific Customization

input-pincode {
    --wc-input-pincode--border-color--valid: #00ff00;
    --wc-input-pincode--border-color--has-error: #ff0000;
}

With these options, you can fully customize the appearance and behavior of the input-pincode component based on its state (valid, error, disabled), or modify the default styles for a more consistent look.