---
title: "MazInputTags"
description: "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."
package: "maz-ui"
url: "https://maz-ui.com/components/maz-input-tags"
---

# 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.

- Package: `maz-ui`
- Import: `import MazInputTags from 'maz-ui/components/MazInputTags'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-input-tags

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

## Basic usage

**Returned value**

```vue
<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

```vue
<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="flex flex-col gap-2">
    <MazInputTags
      v-for="size in sizes"
      :key="size"
      v-model="tags"
      :size="size"
      placeholder="Enter tags"
      color="secondary"
    />
  </div>
</template>
```

```vue
<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>
```

## MazInputTags API

`import MazInputTags from 'maz-ui/components/MazInputTags'`

### Props

- `model-value` (`(string | number)[]`, `v-model`): The modelValue of the input.
- `placeholder` (`string`): The placeholder of the input.
- `label` (`string`): The label of the input.
- `disabled` (`boolean`, default: `false`): Disable the input.
- `error` (`boolean`, default: `false`): Display the input with error style.
- `success` (`boolean`, default: `false`): Display the input with success style.
- `warning` (`boolean`, default: `false`): Display the input with warning style.
- `size` (`"xs" | "sm" | "md" | "lg" | "xl" | "mini"`): The size of the input.
- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): The color of the input.
- `block` (`boolean`): The input will be displayed in full width.
- `add-tags-on-blur` (`boolean`, default: `true`): Add tags on blur.
- `hint` (`string`): The hint text to display below the input.

### Events

- `@update:model-value` (payload: `value?: (string | number)[] | undefined`)