PIN Input

A six-digit PIN input with paste support and keyboard navigation for verification codes.

Add to your project

Connect Uniquel to your coding agent before using the component ID.

MCP ID

component:input/pin-input

Claude*

Codex*

Lovable

Base44

Figma Make

Replit*

Cursor*

* Compatible with most projects that use the default React/Next.js framework.

React

Tailwind CSS

Prop	Type	Description
`value`	`string`	Controlled PIN value.
`defaultValue`	`string`	Initial PIN value.
`onValueChange`	`(value: string) => void`	Called when the PIN changes.
`length`	`number`	Number of PIN digits. Default: 6.
`disabled`	`boolean`	Disables every PIN field.
`autoFocus`	`boolean`	Focuses the first field on mount.
`className`	`string`	Classes merged onto the input group.

Labeled React number input with an optional unit, stacked controls, bounds, and empty values.

Accessible React search bar with highlighted results, keyboard navigation, and polished loading and empty states.

1500

A vertical range input with configurable value labels, thumb shapes, colors, and height.

A premium search input with a focused state and an icon that becomes a submit action as you type.

A minimalist input spinner for choosing quantities with buttons, typing, or arrow keys.