q-otp

The q-otp quasar extension allows you to seamlessly add the QOtp component into your Quasar application.

Install

quasar ext add q-otp

Basic usage

<template>
  <QOtp
      placeholder="-"
      field-classes="q-ml-xs q-mr-xs"
      input-styles="opacity: 1 !important;"
      @complete="(code) => alert(code)"
  />
</template>
<script lang="ts" setup>
  import QOtp from 'quasar-app-extension-q-otp'
</script>

Documentation

Slots

Slot | ---| control | footer |

Content

Attributes | Type ---|--- placeholder | String

State

Attributes | Type ---|--- autofocus | Boolean readonly | Boolean disable | Boolean num | Number

Style

Attributes | Type ---|--- label-color | String color | String bg-color | String dark | Boolean filled | Boolean outlined | Boolean borderless | Boolean standout | Boolean/String hide-bottom-space | Boolean rounded | Boolean square | Boolean dense | Boolean item-aligned | Boolean separator | String conditional-class | Array<String> field-classes | Array<String> input-classes | Array<String> input-styles | String

Events

Event | Callback ---|--- @change | (pin) => String @complete | (pin) => String

Methods

Method | Callback ---|--- blur | () => void focus | () => void clear | () => void getPin | () => String

Uninstall

quasar ext remove q-otp

Contributing

Feel free to open issues and pull requests!

License

MIT (c) Denis Baskovsky.