Skip to main content

PIN Input

A sequence of one-character alphanumeric inputs.

Features

  • Fully managed focus
  • Supports pasting from clipboard
  • Keyboard navigation

API Reference

createPinInput

The builder function used to create the PIN input component.

Props

Prop Default Type / Description
placeholder
string

The placeholder character to use for empty pin-inputs.

value -
string[]

The value of the pin-input.

name -
string

The name of the pin-input.

disabled false
boolean

Whether or not the pin-input is disabled.

type text
string

The type of the pin-input. Use password to mask the input.

defaultValue -
string[]

The default value of the pin-input.

value -
Writable<string[]>

A writable store that controls the value of the pin-input.

See Bring Your Own Store

onValueChange -
ChangeFn<string[]>

A callback called when the value of the value store should be changed. This is useful for controlling the value of the pin-input from outside the pin-input.

See Change Functions

ids -
Record<'root', string>

Override the internally generated ids for the elements.

Elements

Element Description

The builder store used to create the pin-input root.

The builder store used to create the pin-input input.

The builder store used to create the pin-input hidden input.

States

State Description
value

A writable store that returns the value of the pin-input.

valueStr

A derived store that returns the value of the pin-input as a string.

Helpers

Helper Description
clear

A function that clears the pin-input.

Options

Option Description
placeholder

The placeholder character to use for empty pin-inputs.

value

The value of the pin-input.

name

The name of the pin-input.

disabled

Whether or not the pin-input is disabled.

type

The type of the pin-input. Use password to mask the input.

IDs

Option Description
root

The writable store that represents the id of the root element.

root

The root pin-input element.

Data Attributes

Data Attribute Value
[data-complete]

Present if the pin-input is complete.

[data-melt-pin-input]

Present on all pin-input elements.

input

The pin-input input element.

Data Attributes

Data Attribute Value
[data-complete]

Present if the pin-input is complete.

[data-melt-pin-input-input]

Present on all input elements.

Custom Events

Event Value
m-keydown (e: ) => void
m-input (e: ) => void
m-paste (e: ) => void
m-change (e: ) => void
m-focus (e: ) => void
m-blur (e: ) => void

hiddenInput

The hidden input element that stores the pin-input value for form submission.

Data Attributes

Data Attribute Value
[data-melt-pin-input-hidden-input]

Present on all hiddenInput elements.

Accessibility

Key Behavior
ArrowLeft

Moves to the previous input.

ArrowRight

Moves to the next input.

Backspace

Deletes the value of the current input. If the input is empty, moves to the previous input and deletes that value as well.

Delete

Deletes the value of the current input.

Ctrl + V

Pastes the contents of the clipboard into the pin input. If the number of characters in the clipboard equals exceeds the number of inputs, the contents are pasted from the first input. Otherwise, the contents are pasted from the current input onwards.