Verification (Pin Input) - DevReady Kit

Overview

The PinInput component provides a multi-input field for entering verification codes, PINs, or OTP codes with automatic focus management.

Basic Usage

Code
Preview

import { PinInput } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function VerificationBasic() {
  const [value, setValue] = useState('');

  return (
    <PinInput
      length={6}
      value={value}
      onChange={setValue}
    />
  );
}

With Label

Code
Preview

import { PinInput } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function VerificationWithLabel() {
  const [value, setValue] = useState('');

  return (
    <PinInput
      length={4}
      label="Enter verification code"
      value={value}
      onChange={setValue}
    />
  );
}

With Error State

Code
Preview

import { PinInput } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function VerificationWithError() {
  const [value, setValue] = useState('');

  return (
    <PinInput
      length={6}
      value={value}
      onChange={setValue}
      error={true}
      errorMessage="Invalid code"
    />
  );
}

Disabled

Code
Preview

import { PinInput } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function VerificationDisabled() {
  const [value, setValue] = useState('123456');

  return (
    <PinInput 
      length={6} 
      value={value} 
      onChange={() => {}} 
      disabled 
    />
  );
}

Props