Quasar-app-extension-q-otp NPM

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`