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.

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

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

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 end-icon, start-icon or icon with the icon name (string), the component uses <MazIcon icon="..." /> 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" start-icon="/banknotes.svg" end-icon="/user.svg" />

Use your own SVG icons

View code

<MazInput v-model="inputValue" label="label icons">
  <template #start-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 #end-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"
    :start-icon="MazBanknotes"
    :end-icon="MazUser"
  />
</template>

Pass a full MazIconProps object

startIcon and endIcon also accept a full MazIconProps object — pass the same shape <MazIcon> accepts to override the size, set a <title> for screen readers, attach svgAttributes, etc.

View code

<script lang="ts" setup>
import MazInput from 'maz-ui/components/MazInput'
import { MazBanknotes } from '@maz-ui/icons/raw/MazBanknotes'
import { ref } from 'vue'

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

<template>
  <MazInput
    v-model="inputValue"
    label="amount"
    :start-icon="{
      icon: MazBanknotes,
      size: 'lg',
      title: 'Amount in USD',
    }"
  />
</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>

Zoom on iOS

iOS zooms the page when a focused field has a font size below 16px (most sizes with a 14px base-font-size). This applies to every form field: MazInput and the components built on it, MazTextarea, MazInputCode... To prevent it without changing the design of the fields, enable the general.preventIosInputZoom option of @maz-ui/nuxt, or call preventIosInputZoom from @maz-ui/utils in a Vue app.

Colors

TIP

Click on each input to show colors

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
model-value	v-model The current value of the input field. This prop is used for two-way data binding with v-model	T	No	-	-
placeholder	Text displayed when the input is empty to guide the user	string	No	-	-
label	Floating label that appears inside the input and moves up when focused or filled. Provides better UX than traditional placeholders	string	No	-	-
top-label	Static label displayed above the input field. Unlike the floating label, this remains fixed	string	No	-	-
assistive-text	Helper text displayed below the input to provide additional context or validation feedback	string	No	-	-
color	Theme color that affects the border and focus states of the input	"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"	No	"primary"	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast' | 'transparent'
type	HTML input type attribute that determines the input behavior and validation	InputTypeHTMLAttribute	No	"text"	'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week'
required	Makes the input field mandatory for form submission	boolean	No	false	-
disabled	Disables the input field, preventing user interaction and form submission	boolean	No	false	-
readonly	Makes the input field read-only, allowing selection but preventing modification	boolean	No	-	-
id	Unique identifier for the input element, used for form labels and accessibility	string	No	-	-
error	Applies error styling (red border and text) to indicate validation failure	boolean	No	false	-
success	Applies success styling (green border and text) to indicate successful validation	boolean	No	false	-
warning	Applies warning styling (orange border and text) to indicate potential issues	boolean	No	false	-
hint	Alternative text that replaces the label when provided. Useful for contextual hints	string	No	-	-
input-classes	Additional CSS classes to apply specifically to the input wrapper element	string	No	-	-
border	Controls whether the input has a visible border. Set to false for borderless inputs	boolean	No	true	-
inputmode	HTML inputmode attribute that provides hints for virtual keyboards on mobile devices	"none" | "text" | "search" | "url" | "email" | "tel" | "numeric" | "decimal"	No	"text"	'none' | 'text' | 'search' | 'url' | 'email' | 'tel' | 'numeric' | 'decimal'
size	Controls the height and text size of the input component	"xs" | "sm" | "md" | "lg" | "xl" | "mini"	No	-	'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	number | boolean	No	false	-
auto-focus	Automatically focuses the input when the component mounts	boolean	No	false	-
border-active	When true, shows the colored border immediately instead of only on focus	boolean	No	false	-
start-icon	Icon displayed on the inline-start edge of the input (left in LTR, right in RTL). Accepts a bare value (Vue component, raw SVG string, URL or data: URI) or a full MazIconProps object for fine-grained control (size, title, svgAttributes, fallback, …).	MazIconLike	No	-	-
end-icon	Icon displayed on the inline-end edge of the input (right in LTR, left in RTL). Accepts a bare value or a full MazIconProps object.	MazIconLike	No	-	-
rounded-size	Controls the border radius of the input component	MazRoundedSize	No	'md'	'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
block	Makes the input expand to the full width of its container	boolean	No	-	-
name	The name of the input field. Used for form submission and validation	string	No	-	-
autocomplete	The autocomplete attribute for the input field. Used for form submission and validation	string	No	-	-
loading	Loading state for the input field. Used to show a loading spinner	boolean	No	false	-

Events

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

Slots

Name	Description	Bindings
start-icon	Custom content for the inline-start edge of the input field (left in LTR, right in RTL).	-
end-icon	Custom content for the inline-end edge of the input field (right in LTR, left in RTL).	-
loader	Loader slot.	-