Input Tag
A component for inputting and managing multiple tags
Basic Usage
To create a new tag, type text into the input field and press Enter. Pressing Backspace will remove the most recently added tag.
Type and press Enter to create a tag
html
<template>
<HLInputTag placeholder="Type and press Enter to create a tag" />
</template>
<script setup lang="ts">
import { HLInputTag } from '@platform-ui/highrise'
</script>Sizes
Large size
Medium size
Small size
Extra small size
2x Extra small size
3x Extra small size
html
<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
$
INR
html
<template>
<HLInputTag>
<template #prefix>$</template>
<template #suffix>INR</template>
</HLInputTag>
</template>
<script setup lang="ts">
import { HLInputTag } from '@platform-ui/highrise'
</script>Disabled State
html
<template>
<HLInputTag disabled />
</template>
<script setup lang="ts">
import { HLInputTag } from '@platform-ui/highrise'
</script>With Input Group
http://
html
<template>
<HLInputGroup>
<HLInputGroupLabel>http://</HLInputGroupLabel>
<HLInputTag />
</HLInputGroup>
</template>
<script setup lang="ts">
import { HLInputGroup, HLInputGroupLabel, HLInputTag } from '@platform-ui/highrise'
</script>Tag Overflow Behavior
When there are too many tags to fit in the container, they are automatically hidden and shown in a "+n" counter. Hovering over the counter reveals all hidden tags in a tooltip.
html
<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>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
html
<HLInputTag :allowSpaces="true" placeholder="Spaces allowed in tags" />Loading State
Display a loading indicator while processing tag-related operations.
html
<HLInputTag :loading="true" :value="['Loading Tags...']" />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.
html
<template>
<HLInputTag :value="longTags" :truncate="true" :max-width="120" placeholder="Type to add truncated tags" />
</template>
<script setup>
import { HLInputTag } from '@platform-ui/highrise'
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>Imports
ts
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 |
| 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) |
Emits
| Name | Parameters | Description |
|---|---|---|
@input | (event: Event) | Triggered on input |
@input:blur | (event: Event) | Triggered when input loses focus |
@input:focus | (event: Event) | Triggered when input gains focus |
@update:value | (value: string[]) | Triggered when tags array is updated |
@click | ({ event: Event, index: number }) | Triggered when a tag is clicked |
@close | ({ event: Event, index: number }) | Triggered when a tag's close button is clicked |
@update:count | (count: number) | Triggered when hidden tags count changes |
@update:counter | (count: number) | Triggered when visible counter value changes |
@update:overflow | (overflow: boolean) | Triggered when tags overflow container |
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 |