Pin Input

A row of boxes to type a short code, like a verification code or a PIN. Each character goes to its own box and the focus moves ahead by itself.

General

Name the group with aria-label. With numeric, only digits are accepted.

Controlled

Use value and onChange to keep the code in your own state, and onComplete to react when every box is filled.

Masked

With mask, the characters are hidden, like in a password.

Variants

Use filled, light, ghost or subtle with a type to change the surface of the boxes.

Error and disabled

error turns the boxes red and marks them as invalid. disabled locks them.

APIs

PinInput.Props

Attribute	Description	Type	Accepted values	Default
length	number of boxes	`number`	-	`6`
value	the code, to control the component	`string`	-	-
initialValue	the code at the start	`string`	-	`''`
onChange	called with the code each time it changes	`(value: string) => void`	-	-
onComplete	called with the code when every box is filled	`(value: string) => void`	-	-
numeric	accepts only digits and opens the numeric keyboard	`boolean`	-	`false`
mask	hides the characters	`boolean`	-	`false`
boxLabel	name of each box for screen readers	`(index: number, length: number) => string`	-	`Character 1 of 6`
disabled	disable the component	`boolean`	-	`false`
error	red boxes, marked as invalid	`boolean`	-	`false`
type	color of the boxes	`NormalTypes`	`'default', 'primary', 'secondary', 'success', 'warning', 'error', 'info'`	`default`
rounded	round the corners	`boolean`	-	`false`
filled	filled variant	`boolean`	-	`false`
light	light variant	`boolean`	-	`false`
ghost	outline variant	`boolean`	-	`false`
subtle	subtle variant	`boolean`	-	`false`
...	native props, passed to the group `div`	`HTMLAttributes`	`'aria-label', 'id', ...`	-

Typing and pasting

• A character fills its box and moves the focus to the next one. Typing over a filled box replaces its character.
• Backspace clears the box. On an empty box, it goes back to the previous one and clears it.
• Paste fills the boxes from the one that received it, and what does not fit is dropped. The first box accepts the one time code that a phone offers from a text message in the same way.
• Left and Right arrows move between the boxes.
• The code has no gaps, so a click on a box past the end goes to the first empty one.

The boxes are native text inputs in a group named by aria-label, and each one has its own name, like "Character 3 of 6", which you can translate with boxLabel. The first box has autocomplete="one-time-code", so phones can offer the code from a message. error sets aria-invalid on every box.

Edit this page on GitHub