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
style	Style attribut of the component root element	Native type	No
class	Class attribut of the component root element	Native type	No
model-value	v-model	TSParenthesizedType[]	No
placeholder	The placeholder of the input	string	No
label	The label of the input	string	No
disabled	Disable the input	boolean	No
error	Display the input with error style	boolean	No
success	Display the input with success style	boolean	No
warning	Display the input with warning style	boolean	No
size	The size of the input	MazSize	No
color	The color of the input	MazColor	No
block	The input will be displayed in full width	boolean	No
add-tags-on-blur	Add tags on blur	boolean	No
hint	The hint text to display below the input.	string	No

Events

Event name	Properties	Description
update:model-value