Pin Input - Dreamy UI

Pin Input

Pin Input can be used to collect a pin code from authenticator app.

#

Installation

npx dreamy add pin-input

pnpm dlx dreamy add pin-input

yarn dlx dreamy add pin-input

bunx dreamy add pin-input

#

Usage

PinInput is a wrapper component for PinInputField that provides a context for the pin input.

<PinInput.Root>
  <PinInput.Field />
  <PinInput.Field />
  <PinInput.Field />
</PinInput.Root>

#

Controlled

export function ControlledPinInput() {
    const [pin, setPin] = useState("2137");
 
    return (
        <PinInput.Root
            value={pin}
            onChange={setPin}
        >
            <PinInput.Field />
            <PinInput.Field />
            <PinInput.Field />
            <PinInput.Field />
        </PinInput.Root>
    );
}

#

Pin Input Size

#

Pin Input Variant

<VStack w="full">
  <PinInput.Root variant="outline">
    <PinInput.Field />
    <PinInput.Field />
    <PinInput.Field />
  </PinInput.Root>
 
  <PinInput.Root variant="filled">
    <PinInput.Field />
    <PinInput.Field />
    <PinInput.Field />
  </PinInput.Root>
 
  <PinInput.Root variant="flushed">
    <PinInput.Field />
    <PinInput.Field />
    <PinInput.Field />
  </PinInput.Root>
</VStack>

#

Invalid

Pass isInvalid prop to the PinInput to show the error state.

<PinInput.Root isInvalid>
	<PinInput.Field />
	<PinInput.Field />
	<PinInput.Field />
</PinInput.Root>

#

Disabled

Pass isDisabled prop to the PinInput to show the disabled state.

<PinInput.Root isDisabled>
	<PinInput.Field />
	<PinInput.Field />
	<PinInput.Field />
</PinInput.Root>

#

On change

Pass onChange prop to the PinInput to get the value when the pin input is changed.

<PinInput.Root onChange={(pin) => toast({ title: `Pin: ${pin}` })}>
	<PinInput.Field />
	<PinInput.Field />
	<PinInput.Field />
</PinInput.Root>

#

On Complete

Pass onComplete prop to the PinInput to get the complete value when the pin input is filled.

<PinInput.Root onComplete={(pin) => toast({ title: `Pin: ${pin}` })}>
	<PinInput.Field />
	<PinInput.Field />
	<PinInput.Field />
	<PinInput.Field />
</PinInput.Root>

#

OTP

Pass otp prop to the PinInput to make the pin input an One Time Password input.

<PinInput.Root otp>
	<PinInput.Field />
	<PinInput.Field />
	<PinInput.Field />
</PinInput.Root>

#

Mask

Pass mask prop to the PinInput to mask the input.

<PinInput.Root mask>
	<PinInput.Field />
	<PinInput.Field />
	<PinInput.Field />
</PinInput.Root>

#

Type

The type of the pin inputs value. "alphanumeric" | "number".

<PinInput.Root type="alphanumeric">
  <PinInput.Field />
  <PinInput.Field />
  <PinInput.Field />
</PinInput.Root>

#

Manage Focus

Set manageFocus to false to disable the moving focus to the next input when the current input is filled.

<PinInput.Root manageFocus={false}>
	<PinInput.Field />
	<PinInput.Field />
	<PinInput.Field />
</PinInput.Root>

#

Auto Focus

Use autoFocus to focus the first input when the pin input is mounted. Refresh the page to see the effect.

<PinInput.Root autoFocus>
	<PinInput.Field />
	<PinInput.Field />
	<PinInput.Field />
</PinInput.Root>

#

Split fields

You can enter custom content between the fields to split them.

<PinInput.Root>
	<PinInput.Field />
	<PinInput.Field />
	<PinInput.Field />
  
    <Divider orientation="vertical" mx={2} h={8} />
 
	<PinInput.Field />
	<PinInput.Field />  
	<PinInput.Field />  
</PinInput.Root>

Modal

Popover