Input Tag
A component for inputting and managing multiple tags
Basic Usage
Bind the tag array with v-model:value. Type text and press Enter to add a tag; press Backspace in an empty field to remove the last one. Duplicate values are allowed — dedupe in your own handler if you need unique tags.
<template>
<HLInputTag v-model:value="tags" placeholder="Type and press Enter to create a tag" />
</template>
<script setup lang="ts">
import { HLInputTag } from '@platform-ui/highrise'
import { ref } from 'vue'
const tags = ref<string[]>(['tag1', 'tag2'])
</script>Sizes
Set the size prop to one of lg, md, sm, xs, 2xs, or 3xs.
Large size
Medium size
Small size
Extra small size
2x Extra small size
3x Extra small size
<template>
<HLInputTag size="lg" placeholder="Large size" />
<HLInputTag size="md" placeholder="Medium size" />
<HLInputTag size="sm" placeholder="Small size" />
<HLInputTag size="xs" placeholder="Extra small size" />
<HLInputTag size="2xs" placeholder="2x Extra small size" />
<HLInputTag size="3xs" placeholder="3x Extra small size" />
</template>
<script setup lang="ts">
import { HLInputTag } from '@platform-ui/highrise'
</script>With Prefix and Suffix
Use the prefix and suffix slots to render content before and after the input.
<template>
<HLInputTag>
<template #prefix>$</template>
<template #suffix>INR</template>
</HLInputTag>
</template>
<script setup lang="ts">
import { HLInputTag } from '@platform-ui/highrise'
</script>Disabled State
Set the disabled prop to prevent interaction with the input.
<template>
<HLInputTag disabled />
</template>
<script setup lang="ts">
import { HLInputTag } from '@platform-ui/highrise'
</script>With Input Group
Combine HLInputTag with HLInputGroup and HLInputGroupLabel to render an attached label.
<template>
<HLInputGroup>
<HLInputGroupLabel>http://</HLInputGroupLabel>
<HLInputTag />
</HLInputGroup>
</template>
<script setup lang="ts">
import { HLInputGroup, HLInputGroupLabel, HLInputTag } from '@platform-ui/highrise'
</script>Tag Overflow Behavior
By default, when there are too many tags to fit the container's width, the extra tags are hidden behind a +n counter. Hovering the counter reveals the hidden tags in a tooltip. To cap by count instead of width, use Limit Visible Tags.
<template>
<HLInputTag :value="tags" @update:overflow="handleOverflow" />
</template>
<script setup lang="ts">
import { HLInputTag } from '@platform-ui/highrise'
import { ref } from 'vue'
const tags = ref(['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5', 'Tag 6', 'Tag 7'])
function handleOverflow(overflow: boolean) {
console.log('Tags are overflowing:', overflow)
}
</script>Limit Visible Tags
Set maxTagCount to always show a fixed number of tags regardless of width; the remainder collapse into the +n counter. This keeps the field a predictable height when the tag list can grow long.
<template>
<HLInputTag v-model:value="tags" :maxTagCount="3" />
</template>
<script setup lang="ts">
import { HLInputTag } from '@platform-ui/highrise'
import { ref } from 'vue'
const tags = ref(['Design', 'Engineering', 'Product', 'Sales', 'Support', 'Finance'])
</script>Styled Tags
Use tagProps to forward props to every rendered tag — for example color, round, or bordered — to match the chips to your context.
<template>
<HLInputTag v-model:value="tags" :tagProps="{ color: 'blue', round: true }" />
</template>
<script setup lang="ts">
import { HLInputTag } from '@platform-ui/highrise'
import { ref } from 'vue'
const tags = ref(['Priority', 'Urgent'])
</script>Read-only
Set readonly to disable the text field so users can't type new tags. Tags are still displayed and can be changed programmatically through value — useful for showing a fixed set of tags managed elsewhere.
<template>
<HLInputTag v-model:value="tags" readonly />
</template>
<script setup lang="ts">
import { HLInputTag } from '@platform-ui/highrise'
import { ref } from 'vue'
const tags = ref(['Read', 'Only'])
</script>Allow Spaces in Tags
By default, spaces are not allowed in tags. Set allowSpaces to true to enable spaces within tags.
Spaces allowed in tags
<template>
<HLInputTag :allowSpaces="true" placeholder="Spaces allowed in tags" />
</template>
<script setup lang="ts">
import { HLInputTag } from '@platform-ui/highrise'
</script>Loading State
Display a loading indicator while processing tag-related operations.
<template>
<HLInputTag :loading="true" :value="tags" />
</template>
<script setup lang="ts">
import { HLInputTag } from '@platform-ui/highrise'
import { ref } from 'vue'
const tags = ref(['Loading Tags...'])
</script>Tag Truncation
When tags have long labels, you can enable truncation to prevent them from overflowing their container. This is particularly useful when dealing with lengthy tag names.
<template>
<HLInputTag :value="longTags" :truncate="true" :max-width="120" placeholder="Type to add truncated tags" />
</template>
<script setup lang="ts">
import { HLInputTag } from '@platform-ui/highrise'
import { ref } from 'vue'
const longTags = ref([
'Very Long Tag Name That Should Be Truncated',
'Another Extremely Long Tag Label',
'Short Tag',
'Yet Another Long Tag Name That Exceeds The Container Width',
])
</script>Design Guidelines
Input components use a box-shadow to render their focus ring. Box-shadows render outside the element's bounds and may be clipped by any ancestor using overflow: hidden (e.g. Tab Panels or Dropdown Menus).
To prevent this, add a small gutter padding to the component's wrapper to ensure there is enough room for the focus ring to render without being cut off.
<div class="p-[3px]">
<!-- Your component here -->
</div>Accessibility
- Provide
aria-label/aria-labelledbydescribing what tags represent and attach helper text viaaria-describedbyfor creation rules. - Announce tag removals or validation issues inside an
aria-live="polite"region.
Imports
import { HLInputTag } from '@platform-ui/highrise'Props
| Name | Type | Default | Description |
|---|---|---|---|
| id * | string | undefined | undefined | Unique identifier for the input tag |
| placeholder | string | 'Start typing...' | Placeholder text when no tags are present |
| size | 'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs' | 'sm' | Size of the input tag |
| disabled | boolean | false | Whether the input tag is disabled |
| autofocus | boolean | false | Whether to focus the input automatically |
| loading | boolean | false | Whether to show loading state |
| allowSpaces | boolean | false | Whether to allow spaces in tags |
| value | string[] | undefined | undefined | Array of tag values. Bind with v-model:value. |
| readonly | boolean | false | Disables the text field so tags can only be added or removed programmatically (via value) |
| maxTagCount | number | undefined | undefined | Caps how many tags are shown in the field; the rest collapse into a +N counter. When unset, tags collapse automatically based on available width. |
| truncate | boolean | false | Whether to truncate tag text with ellipsis |
| maxWidth | string | number | 136 | Maximum width for truncated tags (in pixels if number, or CSS units if string) |
| tagProps | HLTagProps | undefined | undefined | Props forwarded to every rendered tag — e.g. color, round, bordered — to style the chips. |
Emits
| Name | Parameters | Description |
|---|---|---|
@update:value | (value: string[]) | The tag array changed (add or remove). Backs v-model:value. |
@input | (event: Event) | Fired on each keystroke in the text field |
@input:focus | (event: Event) | The text field gained focus |
@input:blur | (event: Event) | The text field lost focus |
@click | ({ event: Event, index: number }) | A tag was clicked; index is its position in value |
@close | ({ event: Event, index: number }) | A tag's close button was clicked (also emits @update:value) |
@update:overflow | (overflow: boolean) | Whether tags currently overflow and are collapsed into the counter |
@update:count | (count: number) | The number of hidden (overflowed) tags changed |
@update:counter | (count: number) | The value displayed in the +N counter changed |
Slots
| Name | Description |
|---|---|
| prefix | Content to show before the input |
| suffix | Content to show after the input |
Key Interactions
| Key | Action |
|---|---|
| Enter | Creates a new tag from the current input value |
| Backspace | Deletes the last tag when input is empty |
| Escape | Blurs the input field |