MazInputCode

This component creates a customizable input code field with features like dynamic code length, alpha character support, and styling based on states (error, success, warning). The code handles input events, keydown actions, and pasting. Overall, it offers a responsive and visually appealing solution for entering verification codes.

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

Basic usage

v-model="123"

<template>
  <MazInputCode v-model="code" />
</template>

<script lang="ts" setup>
  import MazInputCode from 'maz-ui/components/MazInputCode'

  const code = ref()
</script>

Size

<MazInputCode v-model="code" size="mini" />
<MazInputCode v-model="code" size="xs" />
<MazInputCode v-model="code" size="sm" />
<MazInputCode v-model="code" size="lg" />
<MazInputCode v-model="code" size="xl" />

Disabled

<MazInputCode v-model="code" disabled />