Mobile PIN Entry Component

Build a 6-digit PIN entry interface for a mobile banking app. The interface should display masked PIN input and use a mobile-optimized numeric keypad for entering digits.

Requirements

• Display a masked input that shows 6 placeholder boxes (one for each digit)
• Use a numeric keypad that displays when the user focuses on the input
• The keypad should be mobile-optimized and only show digits 0-9
• After entering all 6 digits, automatically validate the PIN
• If the PIN is "123456", display "PIN Correct!" message
• If the PIN is incorrect, display "Incorrect PIN" message and allow retry
• Users should be able to delete the last digit using the keypad

Test Cases

• Entering 6 digits fills all boxes with masked dots @test
• Entering "123456" displays "PIN Correct!" message @test
• Entering any other 6-digit PIN shows "Incorrect PIN" @test
• Using delete button removes the last digit @test

Implementation

@generates

API

// Component that renders a PIN entry interface with numeric keypad
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'PinEntry',
  emits: ['success', 'error'],
  setup(props, { emit }) {
    // Component implementation
  }
});

Dependencies { .dependencies }

vant { .dependency }

Provides mobile UI components including the numeric keyboard for PIN entry.

@satisfied-by