PinInput

For optimized user experience of entering a PIN or OTP.

Usage

A compound component that provides an optimized experience for entering multi-digit codes like PINs or One-Time Passwords (OTPs).

import { PinInput, Input } from "@elemnts-ui/react";

<PinInput.Root onValueComplete={(e) => console.log(e.value)}>
  <PinInput.Control>
    {Array.from({ length: 4 }).map((_, idx) => (
      <PinInput.Input asChild index={idx} key={idx}>
        <Input variant="secondary" boxSize="2.4rem" fontSize="20" />
      </PinInput.Input>
    ))}
  </PinInput.Control>
</PinInput.Root>;

Masking

Use the mask prop to obscure the input values, similar to a password input.

OTP Mode

Use the otp prop to signal to mobile devices that the input is a one-time password, enabling auto-fill features.

With Field

The PinInput can be used within a Field component to provide a label, helper text, and validation states.

API Reference

PinInput

The root container for the pin input.

Prop	Type	Default
asChild	`boolean`	`false`
autoFocus	`boolean`	-
autoSubmit	`boolean`	-
blurOnComplete	`boolean`	-
count	`number`	-
defaultValue	`string[]`	-
disabled	`boolean`	-
form	`string`	-
id	`string`	-
ids	`Partial<{ root: string; hiddenInput: string; label: string; control: string; input: (id: string) => string }>`	-
invalid	`boolean`	-
mask	`boolean`	-
name	`string`	-
onValueChange	`(details: ValueChangeDetails) => void`	-
onValueComplete	`(details: ValueChangeDetails) => void`	-
onValueInvalid	`(details: ValueInvalidDetails) => void`	-
otp	`boolean`	-
pattern	`string`	-
placeholder	`string`	`"○"`
readOnly	`boolean`	-
required	`boolean`	-
sanitizeValue	`(value: string) => string`	-
selectOnFocus	`boolean`	-
translations	`IntlTranslations`	-
type	`"numeric" \| "alphanumeric" \| "alphabetic"`	`"numeric"`
value	`string[]`	-

PinInputRootProvider

Provides the pin input state created with usePinInput to its child components.

Prop	Type	Default
value	`UsePinInputReturn`	required
asChild	`boolean`	`false`

PinInputLabel

The accessible label for the pin input.

Prop	Type	Default
asChild	`boolean`	`false`

PinInputControl

The container for the individual input fields.

Prop	Type	Default
asChild	`boolean`	`false`

PinInputInput

An individual input field for a PIN digit.

Prop	Type	Default
index	`number`	required
asChild	`boolean`	`false`

PinInputHiddenInput

A hidden native input used for form submission.

Prop	Type	Default
asChild	`boolean`	`false`

PinInputContext

Provides the pin input API to a render function.