Pin input
stable 1.7 kB<hk-pin-input>Separate boxes that behave like one field. Pasting a code fills the whole row, and backspace walks backwards instead of stalling on an empty box. `type` decides what a box will hold at all, and the filter runs on the way in rather than validating afterwards — which is what makes a numeric pin feel like a number pad: a letter never appears and then vanishes, it simply never lands.
#otp#code
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | '' | Current code. Two-way bindable. |
| length | number | 6 | How many boxes to render. |
| type | 'numeric' | 'alphanumeric' | 'numeric' | Which characters are accepted. |
| mask | boolean | false | Renders each character as a dot. |
Outputs
valueChangeEventEmitter<string>Emits on every change.
completedEventEmitter<string>Emits once every box is filled.
Keyboard
- 0–9 / a–z Fills the box and advances
- Backspace Clears, or steps back when already empty
- ← / → Moves between boxes
- Ctrl/Cmd + V Splits a pasted code across every box
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-pin-size | 2.25rem | Box width. |
| --hk-pin-border-filled | #dc2626 | Border once a box has a value. |
Accessibility
- Each box has its own numbered label, so focus position is always announced.
- inputmode="numeric" brings up the digit keypad on touch.
- A pasted code fills the row rather than dropping into one box — the failure everyone hits with OTP fields.