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.

Basic usage

v-model="123"

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

const code = ref()
</script>

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

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

Name	Description	Type	Required	Default
style	The style of the component.	Native type	No	undefined
class	The class of the component.	Native type	No	undefined
model-value	The value of the component (v-model).	T	No	undefined
code-length	The length of the code.	number	No	4
type	The type of the input field.	"text" | "number"	No	'text'
accept-alpha	Whether to accept alpha characters.	boolean	No	false
required	Whether the input is required.	boolean	No	false
disabled	Whether the input is disabled.	boolean	No	false
error	Whether there is an error with the input.	boolean	No	false
success	Whether the input is successful.	boolean	No	false
warning	Whether there is a warning with the input.	boolean	No	false
size	The size of the component.	MazInputCodeSize	No	'md'
color	The color of the component.	MazColor	No	'primary'
hint	The hint text to display below the input.	string	No	undefined

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.