Pin Input

Used to capture a pin code or otp from the user.

<PinInput />

Examples

Sizes

Use the size prop to change the size of the pin input.

<div className="flex flex-col gap-2">
  <PinInput size="xs" />
  <PinInput size="sm" />
  <PinInput size="md" />
  <PinInput size="lg" />
  <PinInput size="xl" />
</div>

The pin input sizes are mapped to the Input component sizes.

One time code

Pass the otp prop to the PinInput component to make the pin input component behave like a one-time code input. This helps improve the user experience when entering OTP codes.

<PinInput otp />

Mask

Pass the mask prop to the PinInput component to obscure the entered pin code.

<PinInput mask />

Placeholder

Pass the placeholder prop to the PinInput component to add a placeholder to the pin input.

<PinInput placeholder="🥳" />

Field

Here's an example of how to compose the Field and the PinInput components.

Enter otp

<Field label="Enter otp">
  <PinInput />
</Field>

Alphanumeric

Pass the type prop to the PinInput component to allow the user to enter alphanumeric characters. Values can be either alphanumeric, numeric, or alphabetic.

<PinInput type="alphanumeric" />