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.

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

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	Possible values
model-value	v-model The value of the component (v-model).	T	No	-	-
code-length	The length of the code.	number	No	4	-
type	The type of the input field.	"number" | "text"	No	"text"	'number' | '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.	"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"	No	"primary"	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast' | 'transparent'
hint	The hint text to display below the input.	string	No	-	-

Events

Event name	Payload	Description
update:model-value	value?: T | undefined	Update the model value.
completed	value: void	Emitted when all inputs are set.