MazInputTags

MazInputTags is a standalone component like free inputs to help user select many values and return an Array of strings. Color options are also available.

INFO

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

TIP

This component use MazInput, so it inherits all his props

Basic usage

Value returned

tags: [ "tags 1", "tags 2" ]

<template>
  <MazInputTags
    v-model="tags"
    label="Enter tags"
    color="info"
  />
</template>


<script lang="ts" setup>
  import { ref } from 'vue'
  import MazInputTags from 'maz-ui/components/MazInputTags'

  const tags = ref(['tags 1', 'tags 2'])
  const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
</script>

Sizing

<template>
  <div class="maz-flex maz-flex-col maz-gap-2">
    <MazInputTags
      v-for="size in sizes"
      :key="size"
      :size="size"
      v-model="tags"
      placeholder="Enter tags"
      color="secondary"
      size="sm"
    />
  </div>
</template>


<script lang="ts" setup>
  import { ref } from 'vue'
  import MazInputTags from 'maz-ui/components/MazInputTags'

  const tags = ref(['tags 1', 'tags 2'])
  const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
</script>

<template>
  <MazInputTags
    v-model="tags"
    label="Enter tags"
    color="info"
  />

  <MazInputTags
    v-model="tags"
    placeholder="Enter tags"
    color="secondary"
    size="sm"
  />
</template>


<script lang="ts" setup>
  import { ref } from 'vue'
  import MazInputTags from 'maz-ui/components/MazInputTags'

  const tags = ref(['tags 1', 'tags 2'])
  const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
</script>

Props & Event

Props

Prop name	Description	Type	Values	Default
style	Style attribut of the component root element	TSIndexedAccessType	-	undefined
class	Class attribut of the component root element	TSIndexedAccessType	-	undefined
modelValue	@model The modelValue of the input	Array	-	undefined
placeholder	The placeholder of the input	string	-	undefined
label	The label of the input	string	-	undefined
disabled	Disable the input	boolean	-	false
error	Display the input with error style	boolean	-	false
success	Display the input with success style	boolean	-	false
warning	Display the input with warning style	boolean	-	false
size	The size of the input	Size	-	'md'
color	The color of the input	Color	-	'primary'
block	The input will be displayed in full width	boolean	-
addTagsOnBlur	Add tags on blur	boolean	-	true
hint	The hint text to display below the input.	string	-

Events

Event name	Properties	Description
update:model-value