Otp Input
Basic usage
Value: -
Complete: -
<script setup lang="ts">
import { NmorphOTPInput } from "@nmorph/nmorph-ui-kit";
const otpValue = ref("");
const completedValue = ref("");
const handleComplete = (value: string) => {
completedValue.value = value;
};
</script><template>
<div class="otp-input-basic-usage-overview">
<p class="nmorph-title-3">Value: {{ otpValue || "-" }}</p>
<p class="nmorph-title-3">Complete: {{ completedValue || "-" }}</p>
<NmorphOTPInput v-model="otpValue" @complete="handleComplete" />
</div>
</template>Length
Defines how many cells are rendered for the code.
<script setup lang="ts">
import { NmorphOTPInput } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="otp-input-length-overview">
<NmorphOTPInput :length="4" />
<NmorphOTPInput :length="6" />
</div>
</template>Mode
Controls which characters are allowed: numeric, text, or alphanumeric.
numeric
text
alphanumeric
<script setup lang="ts">
import { NmorphOTPInput } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="otp-input-mode-overview">
<div class="otp-input-mode-overview__item">
<p class="nmorph-title-3">numeric</p>
<NmorphOTPInput mode="numeric" />
</div>
<div class="otp-input-mode-overview__item">
<p class="nmorph-title-3">text</p>
<NmorphOTPInput mode="text" />
</div>
<div class="otp-input-mode-overview__item">
<p class="nmorph-title-3">alphanumeric</p>
<NmorphOTPInput mode="alphanumeric" :length="4" />
</div>
</div>
</template>Thickness
Sets the size of each OTP cell.
<script setup lang="ts">
import { NmorphOTPInput } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="otp-input-thickness-overview">
<NmorphOTPInput thickness="thick" />
<NmorphOTPInput thickness="basic" />
<NmorphOTPInput thickness="thin" />
</div>
</template>Disabled
Disables all OTP cells if set to true.
<script setup lang="ts">
import { NmorphOTPInput } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="otp-input-disabled-overview">
<NmorphOTPInput disabled />
</div>
</template>