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>