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.

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

Basic usage

Returned value

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

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

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

Sizing

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

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

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

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

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>

Tips

TIP

This component use MazInput, so it inherits all his props

Props

Name	Description	Type	Required	Default
style	Style attribut of the component root element	Native type	No	undefined
class	Class attribut of the component root element	Native type	No	undefined
model-value	v-model	TSParenthesizedType[]	No	undefined
placeholder	The placeholder of the input	string	No	undefined
label	The label of the input	string	No	undefined
disabled	Disable the input	boolean	No	false
error	Display the input with error style	boolean	No	false
success	Display the input with success style	boolean	No	false
warning	Display the input with warning style	boolean	No	false
size	The size of the input	MazSize	No	'md'
color	The color of the input	MazColor	No	'primary'
block	The input will be displayed in full width	boolean	No	undefined
add-tags-on-blur	Add tags on blur	boolean	No	true
hint	The hint text to display below the input.	string	No	undefined

Events

Event name	Properties	Description
update:model-value