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.

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

Basic usage

Label

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

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

  const inputValue = ref()
</script>

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
  model-value="any value"
  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

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

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

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

Auto focus

Will focus automatically the component

label auto-focus

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

No radius

Will remove the border radius

label no-radius

<MazInput
  v-model="inputValue"
  label="label no-radius"
  no-radius
/>

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

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

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

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

danger

white

black

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

<script setup>
  const colors = {
    primary: { name: 'primary', hex: '#1e90ff' },
    secondary: { name: 'secondary', hex: '#1cd1a1' },
    info: { name: 'info', hex: '#17a2b8' },
    success: { name: 'success', hex: '#9acd32' },
    warning: { name: 'warning', hex: '#fcb731' },
    danger: { name: 'danger', hex: '#ff6d6a' },
    white: { name: 'white', hex: '#fff' },
    black: { name: 'black', hex: '#000' },
  }
</script>

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

Danger

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

Valid Button

Warning

Label

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

Props, Event & Slots

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 input @model true	union	-	undefined
placeholder	The placeholder of the input	string	-	undefined
label	The label of the component This label will be displayed inside the input and will be up when the input is focused	string	-	undefined
topLabel	The top label of the component This label will be displayed above the input	string	-
assistiveText	The additional text of the component This text will be displayed below the input	string	-
name	The attribut name of the input	string	-	undefined
color	The color of the component	Color	-	'primary'
type	The attribut type of the input	union	-	'text'
required	The attribut required of the input	boolean	-	false
disabled	The attribut disabled of the input	boolean	-	false
readonly	The attribut readonly of the input	boolean	-	false
id	The attribut id of the input	string	-	undefined
error	Enable error state UI	boolean	-	false
success	Enable success state UI	boolean	-	false
warning	Enable warning state UI	boolean	-	false
hint	The hint will replace the label	string	-	undefined
inputClasses	The class of the input wrapper div element	string	-	undefined
noBorder	Remove the border of the input	boolean	-	false
noRadius	Remove the radius of the input	boolean	-	false
inputmode	The attribut inputmode of the input	TSIndexedAccessType	-	'text'
size	The size of the component	Size	-	'md'
debounce	Enable debounce on input - can be boolean | number, if it is a number, it is used for the debounce delay	union	-	false
debounceDelay	The delay of the debounce @deprecated use debounce instead	number	-	500
validButton	Display the valid button - this button has type="submit"	boolean	-	false
validButtonLoading	Display the loading state on the valid button	boolean	-	false
autoFocus	if true the input will be focus on render	boolean	-	false
borderActive	if true the component has the colorized border by default, not only on focus	boolean	-	false
leftIcon	The left icon of the input @type {string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}	union	-	undefined
rightIcon	The right icon of the input @type {string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}	union	-	undefined
roundedSize	Size radius of the component's border @values 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'	union	-	undefined
block	The input will be displayed in full width	boolean	-
autocomplete	The attribut autocomplete of the input	string	-

Events

Event name	Properties	Description
click	event Event - click event	Event emitted when the input is clicked
update:model-value	value string | number | null | undefined | boolean - the new value	Event emitted when the input value change
focus	event Event - focus event	Event emitted when the input is focused
blur	event Event - blur event	Event emitted when the input is blurred
change	event Event - change event	Event emitted when the input is changed
input	event Event - change event	Event emitted when the input is changed

Slots

Name	Description	Bindings
left-icon	The icon to display on the left of the input
right-icon	The icon to display on the right of the input
valid-button	Replace the valid button by your own