Corex UI
Pagination
Password Input
QR Code

# Pin Input

A pure HTML and vanilla JS implementation of Zag JS Pin Input

The pin input provides controls for editing, incrementing or decrementing numeric values using the keyboard or pointer.

# Anatomy

The Pin Input component consists of the following data parts:

root, control, label, input

<div class="pin-input pin-input-js">
              <div data-part="root">
                <label data-part="label">Enter Pin</label>
                <div data-part="control">
                  <input data-part="input" />
                  <input data-part="input" />
                  <input data-part="input" />
                  <input data-part="input" />
                  <input data-part="input" />
                </div>
              </div>
            </div>

# Installation

First, complete the Corex UI initial installation guide for your platform, bundler, or framework.

  1. Import the component
import "@corex-ui/static/components/pin-input";

This will automatically initialize all elements with class="pin-input-js" and add the necessary interaction behavior.

  1. Add styling

The component is unstyled by default for maximum customization flexibility.

To apply the default Corex UI design system styles, import the stylesheet:

@import "@corex-ui/design/components/pin-input.css";

These styles will be applied to all elements with the pin-input class.