PIN Input

A sequence of one-character alphanumeric inputs.

View code

Features

The builder function used to create the PIN input component.

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.

Element	Description
`root`	The builder store used to create the pin-input root.
`input`	The builder store used to create the pin-input input.
`hiddenInput`	The builder store used to create the pin-input hidden input.

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.

Helper	Description
`clear`	A function that clears the pin-input.

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.

Option	Description
`root`	The writable store that represents the id of the `root` element.

The root pin-input element.

Data Attribute	Value
`[data-complete]`	Present if the pin-input is complete.
`[data-melt-pin-input]`	Present on all pin-input elements.

The pin-input input element.

Data Attribute	Value
`[data-complete]`	Present if the pin-input is complete.
`[data-melt-pin-input-input]`	Present on all input elements.

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

Data Attribute	Value
`[data-melt-pin-input-hidden-input]`	Present on all hiddenInput elements.

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.

On This Page