MazInput

MazInput is a standalone component that replaces the standard html input text with a beautiful design system. Many options like colors, sizes, disabled, loading, error, warning, valid states, error messages and icons are included.

Basic usage

Label

<script setup>
import MazInput from 'maz-ui/components/MazInput'
import { ref } from 'vue'

const inputValue = ref()
</script>

<template>
  <MazInput
    v-model="inputValue"
    label="Label"
    autocomplete="off"
  />
</template>

Top label

Top label

<MazInput v-model="inputValue" top-label="Top label" placeholder="Placeholder" />

Assistive text

Top label

Assistive text

Top label

Assistive text

<MazInput v-model="inputValue" top-label="Top label" assistive-text="Assistive text" placeholder="Placeholder" />

Password

Label

<MazInput v-model="passwordValue" label="Label" type="password" />

Placeholder

<MazInput v-model="inputValue" placeholder="placeholder" />

Required

Will make the input required and * charac to the label or the placeholder

label required

<MazInput v-model="inputValue" label="label required" required />

Disabled

label disabled

<MazInput v-model="inputValue" label="label disabled" disabled />

Hint

Will replace the label, useful to display short message

An error occured

<MazInput v-model="defaultInputValue" label="label hint" hint="An error occured" error />

Icons

label icons

Use icon name

View code

When you use the properties right-icon, left-icon or icon with the icon name (string), the component uses <MazIcon name="..." /> component.

Check out how MazIcon works, see all available icons and download them to put them in your public folder.

<MazInput v-model="inputValue" label="label icons" left-icon="banknotes" right-icon="user" />

Use your own SVG icons

View code

<MazInput v-model="inputValue" label="label icons">
  <template #left-icon>
    <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M2.25 18.75C7.71719 18.75 13.0136 19.4812 18.0468 20.8512C18.7738 21.0491 19.5 20.5086 19.5 19.7551V18.75M3.75 4.5V5.25C3.75 5.66421 3.41421 6 3 6H2.25M2.25 6V5.625C2.25 5.00368 2.75368 4.5 3.375 4.5H20.25M2.25 6V15M20.25 4.5V5.25C20.25 5.66421 20.5858 6 21 6H21.75M20.25 4.5H20.625C21.2463 4.5 21.75 5.00368 21.75 5.625V15.375C21.75 15.9963 21.2463 16.5 20.625 16.5H20.25M21.75 15H21C20.5858 15 20.25 15.3358 20.25 15.75V16.5M20.25 16.5H3.75M3.75 16.5H3.375C2.75368 16.5 2.25 15.9963 2.25 15.375V15M3.75 16.5V15.75C3.75 15.3358 3.41421 15 3 15H2.25M15 10.5C15 12.1569 13.6569 13.5 12 13.5C10.3431 13.5 9 12.1569 9 10.5C9 8.84315 10.3431 7.5 12 7.5C13.6569 7.5 15 8.84315 15 10.5ZM18 10.5H18.0075V10.5075H18V10.5ZM6 10.5H6.0075V10.5075H6V10.5Z"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </template>
  <template #right-icon>
    <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M15.75 6C15.75 8.07107 14.071 9.75 12 9.75C9.9289 9.75 8.24996 8.07107 8.24996 6C8.24996 3.92893 9.9289 2.25 12 2.25C14.071 2.25 15.75 3.92893 15.75 6Z"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
      <path
        d="M4.5011 20.1182C4.5714 16.0369 7.90184 12.75 12 12.75C16.0982 12.75 19.4287 16.0371 19.4988 20.1185C17.216 21.166 14.6764 21.75 12.0003 21.75C9.32396 21.75 6.78406 21.1659 4.5011 20.1182Z"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </template>
</MazInput>

Use vite-svg-loader

View code

<script lang="ts" setup>
import MazBanknotes from '@maz-ui/svg/banknotes.svg'
import MazUser from '@maz-ui/svg/user.svg'
import MazInput from 'maz-ui/components/MazInput'
import { ref } from 'vue'

const inputValue = ref('value')
</script>

<template>
  <MazInput
    v-model="inputValue"
    label="label icons"
    :left-icon="MazBanknotes"
    :right-icon="MazUser"
  />
</template>

Auto focus

Will focus automatically the component

label auto-focus

<MazInput v-model="inputValue" label="label auto-focus" auto-focus />

Debounce

The value emit by the input will be delayed, usefull for searching

The attribute debounce is in milliseconds

If the debounce is true, the default debounce delay is 500ms

label debounce

modelValue: null

<MazInput v-model="inputValue" label="label debounce" :debounce="1000" />

Sizes

Use the attribute size with a value in mini, xs, sm, md, lg, xl

sm

md

lg

xl

<script setup lang="ts">
const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
</script>

<template>
  <MazInput
    v-for="size in sizes"
    :key="size"
    v-model="inputValue"
    :label="size"
    :size="size"
  />
</template>

Colors

TIP

Click on each input to show colors

INFO

Use the attribute color with a value in this list, the component will use this color

primary

secondary

info

success

warning

destructive

accent

contrast

<script setup>
const colors = ['primary', 'secondary', 'info', 'success', 'warning', 'destructive', 'accent', 'contrast']
</script>

<template>
  <MazInput
    v-for="name in colors"
    :key="name"
    v-model="inputValue"
    :label="name"
    :color="name"
  />
</template>

Rounded Size

Use the attribute rounded-size with a value in 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'

<MazInput rounded-size="none" placeholder="Rounded input" />
<MazInput rounded-size="sm" placeholder="Rounded input" />
<MazInput rounded-size="md" placeholder="Rounded input" />
<MazInput rounded-size="lg" placeholder="Rounded input" />
<MazInput rounded-size="xl" placeholder="Rounded input" />
<MazInput rounded-size="full" placeholder="Rounded input" />

State

destructive

Label

<MazInput v-model="inputValue" label="Label" error />

Warning

Label

<MazInput v-model="inputValue" label="Label" warning />

Success

Label

<MazInput v-model="inputValue" label="Label" success />

Props

Name	Description	Type	Required	Default	Possible values
style	Inline styles to apply to the component root element	HTMLAttributes['style']	No	undefined	-
class	CSS classes to apply to the component root element	HTMLAttributes['class']	No	undefined	-
model-value	v-model The current value of the input field. This prop is used for two-way data binding with v-model Example: <MazInput v-model="inputValue" />	T	No	undefined	-
placeholder	Text displayed when the input is empty to guide the user Example: "Enter your email address"	string	No	undefined	-
label	Floating label that appears inside the input and moves up when focused or filled. Provides better UX than traditional placeholders Example: "Email Address"	string	No	undefined	-
top-label	Static label displayed above the input field. Unlike the floating label, this remains fixed Example: "User Information"	string	No	undefined	-
assistive-text	Helper text displayed below the input to provide additional context or validation feedback Example: "Must contain at least 8 characters"	string	No	undefined	-
color	Theme color that affects the border and focus states of the input Example: "primary"	MazColor	No	'primary'	primary, secondary, accent, info, success, warning, destructive, contrast
type	HTML input type attribute that determines the input behavior and validation Example: "email"	InputHTMLAttributes['type']	No	'text'	text, password, email, number, tel, url, search, date, time, datetime-local, month, week
required	Makes the input field mandatory for form submission Example: true	boolean	No	false	-
disabled	Disables the input field, preventing user interaction and form submission Example: false	boolean	No	false	-
readonly	Makes the input field read-only, allowing selection but preventing modification Example: false	boolean	No	undefined	-
id	Unique identifier for the input element, used for form labels and accessibility Example: "user-email"	string	No	undefined	-
error	Applies error styling (red border and text) to indicate validation failure Example: true	boolean	No	false	-
success	Applies success styling (green border and text) to indicate successful validation Example: true	boolean	No	false	-
warning	Applies warning styling (orange border and text) to indicate potential issues Example: true	boolean	No	false	-
hint	Alternative text that replaces the label when provided. Useful for contextual hints Example: "Optional field"	string	No	undefined	-
input-classes	Additional CSS classes to apply specifically to the input wrapper element Example: "custom-input-wrapper"	string	No	undefined	-
border	Controls whether the input has a visible border. Set to false for borderless inputs Example: true	boolean	No	true	-
inputmode	HTML inputmode attribute that provides hints for virtual keyboards on mobile devices Example: "numeric"	InputHTMLAttributes['inputmode']	No	'text'	text, numeric, decimal, tel, search, email, url
size	Controls the height and text size of the input component Example: "md"	MazSize	No	'md'	xs, sm, md, lg, xl, mini
debounce	Enables input debouncing to limit the frequency of value updates. When true, uses 500ms delay. When a number, uses that value as delay in milliseconds Example: true	boolean | number	No	false	-
auto-focus	Automatically focuses the input when the component mounts Example: false	boolean	No	false	-
border-active	When true, shows the colored border immediately instead of only on focus Example: false	boolean	No	false	-
left-icon	Icon displayed on the left side of the input. Can be an icon name string or icon component Example: "user"	string | IconComponent	No	undefined	-
right-icon	Icon displayed on the right side of the input. Can be an icon name string or icon component Example: "search"	string | IconComponent	No	undefined	-
rounded-size	Controls the border radius of the input component Example: "lg"	'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'	No	'lg'	none, sm, md, lg, xl, full
block	Makes the input expand to the full width of its container Example: false	boolean	No	undefined	-
name	The name of the input field. Used for form submission and validation Example: "email"	string	No	undefined	-
autocomplete	The autocomplete attribute for the input field. Used for form submission and validation Example: "email"	string	No	undefined	-
loading	Loading state for the input field. Used to show a loading spinner	boolean	No	false	-

Events

Event name	Properties	Description
click	event Event - The native click event object	Triggered when the user clicks on the input field
update:model-value	value T - The new input value (string, number, boolean, null, or undefined)	Triggered when the input value changes, used for v-model two-way binding. This event is debounced if the debounce prop is enabled
focus	event Event - The native focus event object	Triggered when the input field gains focus (user clicks or tabs into the field)
blur	event Event - The native blur event object	Triggered when the input field loses focus (user clicks outside or tabs away)
change	event Event - The native change event object	Triggered when the input value changes and the field loses focus. Different from input event which fires on every keystroke
input	event Event - The native input event object	Triggered on every keystroke or input interaction (real-time input changes). This is the raw input event, not debounced

Slots

Name	Description	Bindings
left-icon	Custom content for the left side of the input field.
right-icon	Custom content for the right side of the input field.
loader	Loader slot.