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 />

Props & Event

Props

Prop name	Description	Type	Values	Default
style	The style of the component.	TSIndexedAccessType	-	undefined
class	The class of the component.	TSIndexedAccessType	-	undefined
modelValue	The value of the component (v-model).	T	-	undefined
codeLength	The length of the code.	number	-	4
type	The type of the input field.	union	-	'text'
acceptAlpha	Whether to accept alpha characters.	boolean	-	false
required	Whether the input is required.	boolean	-	false
disabled	Whether the input is disabled.	boolean	-	false
error	Whether there is an error with the input.	boolean	-	false
success	Whether the input is successful.	boolean	-	false
warning	Whether there is a warning with the input.	boolean	-	false
size	The size of the component.	Size	-	'md'
color	The color of the component.	Color	-	'primary'
hint	The hint text to display below the input.	string	-

Events

Event name	Properties	Description
update:model-value	value mixed - The new value of the model.	Update the model value.
completed		Emitted when all inputs are set.