Hacktron Design System

InputTags

A text field where each entered value becomes its own removable pill.

main
release/*
<template>  <InputTags v-model="tags" placeholder="Add a value" /></template>

Props

Name Type Default
size"md" | "sm""md"
errorbooleanfalse
...propsUInputTags props (modelValue: string[], delimiter, max, maxLength, addOnBlur, addOnTab, addOnPaste, duplicate, disabled, placeholder, ...)-

Guidelines

Do

  • Use InputTags for an open-ended list of short values the user types themselves - filter values, labels, patterns - where each entry needs to be individually removable without retyping the rest.
  • Set max when the list has a real ceiling (e.g. a filter's allowed value count) rather than letting it grow unbounded.
  • Pair add-on-blur with a real commit trigger like Enter, so a half-typed draft isn't silently lost when the field loses focus.
  • Use the #trailing slot for a genuinely interactive action tied to the field (e.g. an overflow "expand" button) - see apps/frontend's scan-filter rows for the pattern.
  • Inside a UFormField, a validation error puts the field on the error surface by itself. Pass error for a state the form doesn't know.

Don't

  • Don't use InputTags for a single value - that's Input. v-model here is an array; forcing a one-item list to stand in for a plain string is the wrong shape for the data.
  • Don't use InputTags to let the user pick from a fixed, known set of options - that's Select or Combobox. InputTags is for values the user is authoring themselves, not choosing from a list.
  • Don't rely on the built-in delete icon alone for a error/validation message - error only swaps the field's own color; pair it with the same field-level messaging pattern as Input.

Examples

With a max

Caps how many tags can be added - see apps/frontend's scan-filter rows, which pass MAX_SCAN_FILTER_ITEMS.

main
release/*
<template>  <InputTags v-model="branches" :max="5" placeholder="Add a branch pattern" /></template>

With a trailing action

#trailing is a real forwarded slot, so it can hold an interactive control like this overflow button, not just a static icon.

bug
p1
<template>  <InputTags v-model="labels" placeholder="Add a label">    <template #trailing>      <IconButton icon="i-lucide-more-horizontal" variant="ghost" size="xs" aria-label="Expand" />    </template>  </InputTags></template>

Error state

Real bg/border color swap, same rationale as Input's own error prop.

not a valid pattern
<template>  <InputTags v-model="invalidTags" error placeholder="Add a branch pattern" /></template>