Pin Input - Dreamy UI

Pin Input

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

#

Import

PinInput - The Pin Input component with context.
PinInputField - The field for the pin input.

import { PinInput, PinInputField } from "@dreamy-ui/react";

#

Usage

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

<PinInput>
  <PinInputField />
  <PinInputField />
  <PinInputField />
</PinInput>

#

Controlled

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

#

Pin Input Size

#

Pin Input Variant

<VStack w="full">
  <PinInput variant="outline">
      <PinInputField />
      <PinInputField />
      <PinInputField />
   </PinInput>
 
   <PinInput variant="filled">
       <PinInputField />
       <PinInputField />
       <PinInputField />
    </PinInput>
 
     <PinInput variant="flushed">
        <PinInputField />
		<PinInputField />
		<PinInputField />
	 </PinInput>
</VStack>

#

Invalid

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

<PinInput isInvalid>
	<PinInputField />
	<PinInputField />
 </PinInput>

#

Disabled

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

<PinInput isDisabled>
	<PinInputField />
	<PinInputField />
	<PinInputField />
</PinInput>

Modal

Popover