Pin Input

A sequence of one-character alphanumeric inputs.

View code

Features

Fully managed focus
Supports pasting from clipboard
Keyboard navigation

API Reference

createPinInput

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.

Returned Props

Returned Prop	Type	Description
`options`	`Writable<CreatePinInputProps>`	A writable store that contains the props used to create the pin-input.
`clear`	`() => void`	A function that clears the pin-input.
`value`	`Writable<string[]>`	A writable store that controls the value of the pin-input.
`valueStr`	`Readable<string>`	A derived store that returns the value of the pin-input as a string.
`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.

root

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

Data Attributes

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

hiddenInput

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.
`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