Anyone built a Pin Pad Component?

  • Anyone put together a pin pad component using Quasar components? Just asking before I put in the time myself.

    see also

  • I already answered in the other thread, but I can go into detail about the simple component I wrote there.

            <div v-for="row in 3" class="row justify-center">
                <div v-for="col in 3" class="col-auto">
                    <q-btn @click="handleClick((row-1)*3 + col)" :disabled="disabled">
                        {{ (row-1)*3 + col }}
            <q-input v-model="pin" clearable placeholder="PIN" class="pin-input"/>
      import { QBtn, QInput, Toast } from 'quasar'
      const PIN_LENGT = 4
      // Just for demo purposes
      const CORRECT_PIN = '1234'
      export default {
        data () {
          return {
            pin: '',
            disabled: false
        methods: {
          handleClick (digit) {
   += digit
          validatePin () {
            if ( === CORRECT_PIN) {
              Toast.create.positive({ html: 'Correct PIN!' })
            } else {
              Toast.create.negative({ html: 'Wrong PIN!' })
          reset () {
   = ''
            this.disabled = false
        watch: {
          pin (val) {
            if (val && val.length === PIN_LENGT) {
              this.disabled = true
        components: { QBtn, QInput }
        .pin-input {
            width: 20%;
            margin: auto;

    This version is a bit extended. I use a loop to create the buttons in a grid, but you could also write down each button manually.
    Each button press sends its digit to an event handler, which will concatenate the currently entered pin with the new digit.
    I use a watcher to watch the digit and if it reaches a specified length I call a check method.
    The check method compares the pin against an expected string (in real life this would probably be an AJAX call to your server) and if the pin is correct shows an appropriate Toast message. In either case, the pin pad gets reset.
    This is a very simple solution, but you should be able to customize it to your needs.

  • the detailed method and explanation is here
    thanks again @a47ae

  • @a47ae Thanks for you post. When give it a spin I’ll report back and share any improvements or new features.

  • @a47ae The code works great thx.

    @rstoenescu I would like to add the pin pad as an option to the the Dialog component but am having a hard time tracking down the .14beta source code. The repo only has the distribution code which is uglified/minified. I’d do it as a PR if I knew which repo/branch to fork.

  • Great to hear that it works as expected 🙂
    You can finde the source code for Quasar in its Github repository right here:

  • it was the beta source code I couldn’t identify/find but I just noticed that @rstoenescu has released the beta as .14 so now source for that is easily found/identified.

  • The latest beta version also is equivalent to the dev branch most of the time. 🙂

Log in to reply