InputTags

InputTagsGitLab
Um elemento de input que exibe tags interativas.

Uso

Use a diretiva v-model para controlar o valor do InputTags.

Vue
<script setup lang="ts">
const value = ref(['Vue'])
</script>

<template>
  <NInputTags v-model="value" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(['Vue'])
</script>

<template>
  <NInputTags v-model="value" />
</template>

Use a prop default-value para definir o valor inicial quando você não precisa controlar o estado.

Vue
<template>
  <NInputTags :default-value="['Vue']" />
</template>

Placeholder

Use a prop placeholder para definir um texto de placeholder.

<template>
  <NInputTags placeholder="Enter tags..." />
</template>

Comprimento máximo

Use a prop max-length para definir o número máximo de caracteres permitidos em uma tag.

<template>
  <NInputTags :max-length="4" />
</template>

Cor

Use a prop color para alterar a cor do ring quando o InputTags está em foco.

Vue
<script setup lang="ts">
const value = ref(['Vue'])
</script>

<template>
  <NInputTags v-model="value" color="neutral" highlight />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(['Vue'])
</script>

<template>
  <NInputTags v-model="value" color="neutral" highlight />
</template>
A prop highlight é usada aqui para mostrar o estado de foco. Ela é usada internamente quando ocorre um erro de validação.

Variantes

Use a prop variant para alterar a aparência do InputTags.

Vue
<script setup lang="ts">
const value = ref(['Vue'])
</script>

<template>
  <NInputTags v-model="value" variant="subtle" color="neutral" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(['Vue'])
</script>

<template>
  <NInputTags v-model="value" variant="subtle" color="neutral" />
</template>

Tamanhos

Use a prop size para ajustar o tamanho do InputTags.

Vue
<script setup lang="ts">
const value = ref(['Vue'])
</script>

<template>
  <NInputTags v-model="value" size="xl" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(['Vue'])
</script>

<template>
  <NInputTags v-model="value" size="xl" />
</template>

Ícone

Use a prop icon para exibir um Icon dentro do InputTags.

Vue
<script setup lang="ts">
const value = ref(['Vue'])
</script>

<template>
  <NInputTags v-model="value" icon="i-lucide-search" size="md" variant="outline" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(['Vue'])
</script>

<template>
  <NInputTags v-model="value" icon="i-lucide-search" size="md" variant="outline" />
</template>
Use as props leading e trailing para definir a posição do ícone ou as props leading-icon e trailing-icon para definir um ícone diferente para cada posição.

Avatar

Use a prop avatar para exibir um Avatar dentro do InputTags.

Vue
<script setup lang="ts">
const value = ref(['Vue'])
</script>

<template>
  <NInputTags
    v-model="value"
    :avatar="{
      src: 'https://github.com/vuejs.png',
      loading: 'lazy'
    }"
    size="md"
    variant="outline"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(['Vue'])
</script>

<template>
  <NInputTags
    v-model="value"
    :avatar="{
      src: 'https://github.com/vuejs.png',
      loading: 'lazy'
    }"
    size="md"
    variant="outline"
  />
</template>

Ícone de excluir

Use a prop delete-icon para personalizar o Icon de exclusão nas tags. O padrão é i-lucide-x.

Vue
<script setup lang="ts">
const value = ref(['Vue'])
</script>

<template>
  <NInputTags v-model="value" delete-icon="i-lucide-trash" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(['Vue'])
</script>

<template>
  <NInputTags v-model="value" delete-icon="i-lucide-trash" />
</template>
Você pode personalizar esse ícone globalmente no seu app.config.ts na chave ui.icons.close.
Você pode personalizar esse ícone globalmente no seu vite.config.ts na chave ui.icons.close.

Carregando

Use a prop loading para exibir um ícone de carregamento no InputTags.

Vue
<script setup lang="ts">
const value = ref(['Vue'])
</script>

<template>
  <NInputTags v-model="value" loading />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(['Vue'])
</script>

<template>
  <NInputTags v-model="value" loading />
</template>

Ícone de carregamento

Use a prop loading-icon para personalizar o ícone de carregamento. O padrão é i-lucide-loader-circle.

Vue
<script setup lang="ts">
const value = ref(['Vue'])
</script>

<template>
  <NInputTags v-model="value" loading loading-icon="i-lucide-loader" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(['Vue'])
</script>

<template>
  <NInputTags v-model="value" loading loading-icon="i-lucide-loader" />
</template>
Você pode personalizar esse ícone globalmente no seu app.config.ts na chave ui.icons.loading.
Você pode personalizar esse ícone globalmente no seu vite.config.ts na chave ui.icons.loading.

Desabilitado

Use a prop disabled para desabilitar o InputTags.

Vue
<script setup lang="ts">
const value = ref(['Vue'])
</script>

<template>
  <NInputTags v-model="value" disabled />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(['Vue'])
</script>

<template>
  <NInputTags v-model="value" disabled />
</template>

Exemplos

Dentro de um FormField

Você pode usar o InputTags dentro de um componente FormField para exibir um rótulo, texto de ajuda, indicador de obrigatório, etc.

Vue

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

placeholder string

The placeholder text when the input is empty.

maxLength number

The maximum number of character allowed.

color'primary' "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error" | "neutral"
variant'outline' "outline" | "soft" | "subtle" | "ghost" | "none"
size'md' "xs" | "sm" | "md" | "lg" | "xl"
autofocusboolean
autofocusDelay0 number
deleteIconappConfig.ui.icons.closeany

The icon displayed to delete a tag.

highlightboolean

Highlight the ring color like a focus state.

fixedboolean

Keep the mobile text size on all breakpoints.

modelValue null | T[]

The controlled value of the tags input. Can be bind as v-model.

defaultValue T[]

The value of the tags that should be added. Use when you do not need to control the state of the tags input

addOnPasteboolean

When true, allow adding tags on paste. Work in conjunction with delimiter prop.

addOnTabboolean

When true allow adding tags on tab keydown

addOnBlurboolean

When true allow adding tags blur input

duplicateboolean

When true, allow duplicated tags.

disabledboolean

When true, prevents the user from interacting with the tags input.

delimiter string | RegExp

The character or regular expression to trigger the addition of a new tag. Also used to split tags for @paste event

max number

Maximum number of tags.

id string
convertValue (value: string): T

Convert the input value to the desired type. Mandatory when using objects as values and using TagsInputInput

displayValue (value: T): string

Display the value of the tag. Useful when you want to apply modifications to the value like adding a suffix or when using object as values

name string

The name of the field. Submitted with its owning form as part of a name/value pair.

requiredboolean

When true, indicates that the user must set the value before the owning form can be submitted.

iconany

Display an icon based on the leading and trailing props.

avatar AvatarProps

Display an avatar on the left side.

leadingboolean

When true, the icon will be displayed on the left side.

leadingIconany

Display an icon on the left side.

trailingboolean

When true, the icon will be displayed on the right side.

trailingIconany

Display an icon on the right side.

loadingboolean

When true, the loading icon will be displayed.

loadingIconappConfig.ui.icons.loadingany

The icon when the loading prop is true.

list string
readonly false | true | "true" | "false"
autocomplete "on" | "off" | string & {}
ui { root?: SlotClass; base?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailing?: SlotClass; trailingIcon?: SlotClass; item?: SlotClass; itemText?: SlotClass; itemDelete?: SlotClass; itemDeleteIcon?: SlotClass; input?: SlotClass; }
Este componente também suporta todos os atributos HTML nativos de <input>.

Slots

Slot Type
leading{ ui: object; }
default{ ui: object; }
trailing{ ui: object; }
item-text{ item: T; index: number; ui: object; }
item-delete{ item: T; index: number; ui: object; }

Emits

Event Type
change[event: Event]
blur[event: FocusEvent]
focus[event: FocusEvent]
update:modelValue[payload: T[]]
invalid[payload: T]
addTag[payload: T]
removeTag[payload: T]

Expose

Ao acessar o componente por meio de um template ref, você pode usar o seguinte:

NameType
inputRefRef<HTMLInputElement | null>

Tema

app.config.ts
export default defineAppConfig({
  ui: {
    inputTags: {
      slots: {
        root: [
          'relative inline-flex items-center',
          'flex-wrap'
        ],
        base: [
          'rounded-md',
          'transition-colors'
        ],
        leading: 'absolute inset-y-0 start-0 flex items-center',
        leadingIcon: 'shrink-0 text-dimmed',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        trailing: 'absolute inset-y-0 end-0 flex items-center',
        trailingIcon: 'shrink-0 text-dimmed',
        item: 'px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state="active"]:bg-accented',
        itemText: '',
        itemDelete: [
          'inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none',
          'transition-colors'
        ],
        itemDeleteIcon: 'shrink-0',
        input: 'flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
      },
      variants: {
        fieldGroup: {
          horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]',
          vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]'
        },
        size: {
          xs: {
            base: 'px-2 py-1 text-sm/4 gap-1',
            leading: 'ps-2',
            trailing: 'pe-2',
            leadingIcon: 'size-4',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-4',
            item: 'text-[10px]/3',
            itemDeleteIcon: 'size-3'
          },
          sm: {
            base: 'px-2.5 py-1.5 text-sm/4 gap-1.5',
            leading: 'ps-2.5',
            trailing: 'pe-2.5',
            leadingIcon: 'size-4',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-4',
            item: 'text-[10px]/3',
            itemDeleteIcon: 'size-3'
          },
          md: {
            base: 'px-2.5 py-1.5 text-base/5 gap-1.5',
            leading: 'ps-2.5',
            trailing: 'pe-2.5',
            leadingIcon: 'size-5',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-5',
            item: 'text-xs',
            itemDeleteIcon: 'size-3.5'
          },
          lg: {
            base: 'px-3 py-2 text-base/5 gap-2',
            leading: 'ps-3',
            trailing: 'pe-3',
            leadingIcon: 'size-5',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-5',
            item: 'text-xs',
            itemDeleteIcon: 'size-3.5'
          },
          xl: {
            base: 'px-3 py-2 text-base gap-2',
            leading: 'ps-3',
            trailing: 'pe-3',
            leadingIcon: 'size-6',
            leadingAvatarSize: 'xs',
            trailingIcon: 'size-6',
            item: 'text-sm',
            itemDeleteIcon: 'size-4'
          }
        },
        variant: {
          outline: 'text-highlighted bg-default ring ring-inset ring-accented',
          soft: 'text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50',
          subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
          ghost: 'text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
          none: 'text-highlighted bg-transparent has-focus:outline-none'
        },
        color: {
          primary: '',
          secondary: '',
          accent: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: ''
        },
        fixed: {
          false: ''
        },
        type: {
          file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none'
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary'
        },
        {
          color: 'primary',
          variant: [
            'soft',
            'ghost'
          ],
          class: 'outline-primary/25 has-focus-visible:outline-3'
        },
        {
          color: 'primary',
          highlight: true,
          class: 'ring ring-inset ring-primary'
        },
        {
          color: 'neutral',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted'
        },
        {
          color: 'neutral',
          variant: [
            'soft',
            'ghost'
          ],
          class: 'outline-inverted/25 has-focus-visible:outline-3'
        },
        {
          color: 'neutral',
          highlight: true,
          class: 'ring ring-inset ring-inverted'
        },
        {
          leading: true,
          size: 'xs',
          class: 'ps-7'
        },
        {
          leading: true,
          size: 'sm',
          class: 'ps-8'
        },
        {
          leading: true,
          size: 'md',
          class: 'ps-9'
        },
        {
          leading: true,
          size: 'lg',
          class: 'ps-10'
        },
        {
          leading: true,
          size: 'xl',
          class: 'ps-11'
        },
        {
          trailing: true,
          size: 'xs',
          class: 'pe-7'
        },
        {
          trailing: true,
          size: 'sm',
          class: 'pe-8'
        },
        {
          trailing: true,
          size: 'md',
          class: 'pe-9'
        },
        {
          trailing: true,
          size: 'lg',
          class: 'pe-10'
        },
        {
          trailing: true,
          size: 'xl',
          class: 'pe-11'
        },
        {
          loading: true,
          leading: true,
          class: {
            leadingIcon: 'animate-spin'
          }
        },
        {
          loading: true,
          leading: false,
          trailing: true,
          class: {
            trailingIcon: 'animate-spin'
          }
        },
        {
          fixed: false,
          size: 'xs',
          class: 'md:text-xs'
        },
        {
          fixed: false,
          size: 'sm',
          class: 'md:text-xs'
        },
        {
          fixed: false,
          size: 'md',
          class: 'md:text-sm'
        },
        {
          fixed: false,
          size: 'lg',
          class: 'md:text-sm'
        }
      ],
      defaultVariants: {
        size: 'md',
        color: 'accent',
        variant: 'outline'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        inputTags: {
          slots: {
            root: [
              'relative inline-flex items-center',
              'flex-wrap'
            ],
            base: [
              'rounded-md',
              'transition-colors'
            ],
            leading: 'absolute inset-y-0 start-0 flex items-center',
            leadingIcon: 'shrink-0 text-dimmed',
            leadingAvatar: 'shrink-0',
            leadingAvatarSize: '',
            trailing: 'absolute inset-y-0 end-0 flex items-center',
            trailingIcon: 'shrink-0 text-dimmed',
            item: 'px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state="active"]:bg-accented',
            itemText: '',
            itemDelete: [
              'inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none',
              'transition-colors'
            ],
            itemDeleteIcon: 'shrink-0',
            input: 'flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
          },
          variants: {
            fieldGroup: {
              horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]',
              vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]'
            },
            size: {
              xs: {
                base: 'px-2 py-1 text-sm/4 gap-1',
                leading: 'ps-2',
                trailing: 'pe-2',
                leadingIcon: 'size-4',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-4',
                item: 'text-[10px]/3',
                itemDeleteIcon: 'size-3'
              },
              sm: {
                base: 'px-2.5 py-1.5 text-sm/4 gap-1.5',
                leading: 'ps-2.5',
                trailing: 'pe-2.5',
                leadingIcon: 'size-4',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-4',
                item: 'text-[10px]/3',
                itemDeleteIcon: 'size-3'
              },
              md: {
                base: 'px-2.5 py-1.5 text-base/5 gap-1.5',
                leading: 'ps-2.5',
                trailing: 'pe-2.5',
                leadingIcon: 'size-5',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-5',
                item: 'text-xs',
                itemDeleteIcon: 'size-3.5'
              },
              lg: {
                base: 'px-3 py-2 text-base/5 gap-2',
                leading: 'ps-3',
                trailing: 'pe-3',
                leadingIcon: 'size-5',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-5',
                item: 'text-xs',
                itemDeleteIcon: 'size-3.5'
              },
              xl: {
                base: 'px-3 py-2 text-base gap-2',
                leading: 'ps-3',
                trailing: 'pe-3',
                leadingIcon: 'size-6',
                leadingAvatarSize: 'xs',
                trailingIcon: 'size-6',
                item: 'text-sm',
                itemDeleteIcon: 'size-4'
              }
            },
            variant: {
              outline: 'text-highlighted bg-default ring ring-inset ring-accented',
              soft: 'text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50',
              subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
              ghost: 'text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
              none: 'text-highlighted bg-transparent has-focus:outline-none'
            },
            color: {
              primary: '',
              secondary: '',
              accent: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            },
            leading: {
              true: ''
            },
            trailing: {
              true: ''
            },
            loading: {
              true: ''
            },
            highlight: {
              true: ''
            },
            fixed: {
              false: ''
            },
            type: {
              file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none'
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary'
            },
            {
              color: 'primary',
              variant: [
                'soft',
                'ghost'
              ],
              class: 'outline-primary/25 has-focus-visible:outline-3'
            },
            {
              color: 'primary',
              highlight: true,
              class: 'ring ring-inset ring-primary'
            },
            {
              color: 'neutral',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted'
            },
            {
              color: 'neutral',
              variant: [
                'soft',
                'ghost'
              ],
              class: 'outline-inverted/25 has-focus-visible:outline-3'
            },
            {
              color: 'neutral',
              highlight: true,
              class: 'ring ring-inset ring-inverted'
            },
            {
              leading: true,
              size: 'xs',
              class: 'ps-7'
            },
            {
              leading: true,
              size: 'sm',
              class: 'ps-8'
            },
            {
              leading: true,
              size: 'md',
              class: 'ps-9'
            },
            {
              leading: true,
              size: 'lg',
              class: 'ps-10'
            },
            {
              leading: true,
              size: 'xl',
              class: 'ps-11'
            },
            {
              trailing: true,
              size: 'xs',
              class: 'pe-7'
            },
            {
              trailing: true,
              size: 'sm',
              class: 'pe-8'
            },
            {
              trailing: true,
              size: 'md',
              class: 'pe-9'
            },
            {
              trailing: true,
              size: 'lg',
              class: 'pe-10'
            },
            {
              trailing: true,
              size: 'xl',
              class: 'pe-11'
            },
            {
              loading: true,
              leading: true,
              class: {
                leadingIcon: 'animate-spin'
              }
            },
            {
              loading: true,
              leading: false,
              trailing: true,
              class: {
                trailingIcon: 'animate-spin'
              }
            },
            {
              fixed: false,
              size: 'xs',
              class: 'md:text-xs'
            },
            {
              fixed: false,
              size: 'sm',
              class: 'md:text-xs'
            },
            {
              fixed: false,
              size: 'md',
              class: 'md:text-sm'
            },
            {
              fixed: false,
              size: 'lg',
              class: 'md:text-sm'
            }
          ],
          defaultVariants: {
            size: 'md',
            color: 'accent',
            variant: 'outline'
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitLab.

Changelog

No recent changes

InputRating

Um componente para exibir e coletar avaliações dos usuários.

InputTime

Um input para selecionar um horário.