Dynamic Tags

Dynamic tags are a component that allows you to create a list of tags.

Basic

Blogs

Websites

Funnels

+0

Vue

<template>
  <div style="width: 500px; border: 1px solid #ccc; padding: 4px">
    <HLTagGroup id="demo" :defaultValue="defaultValuesString" @update:value="handleChange" />
  </div>
</template>
<script setup>
  import { HLTagGroup } from '@platform-ui/highrise'
  const defaultValuesString = ['Blogs', 'Websites', 'Funnels']
  const handleChange = value => {
    console.log(value)
  }
</script>

With Popover

Nico Robin

Zenin Toji

Itadori Yuuji

Gojo Satoru

+0

Vue

<div style="width: 400px; border: 1px solid #ccc; padding: 8px">
  <HLTagGroup ref="tagGroupRef" @update:value="handleChange" :default-value="defaultValues" @input="handleInput" size="sm">
    <template #popover-content>
      <div class="p-2">
        <div v-if="popoverAvatarOptions.length === 0">
          <HLText>No options found</HLText>
        </div>
        <div
          v-else
          v-for="option in popoverAvatarOptions"
          :key="option.id"
          @click="handlePopoverClick1(option)"
          class="cursor-pointer flex items-center gap-2 hover:bg-gray-100 px-1"
        >
          <HLAvatar v-bind="option" size="3xs" />
          <span>{{ option.name }}</span>
        </div>
      </div>
    </template>
  </HLTagGroup>
</div>

TS

const defaultValues1 = ['Nico Robin', 'Zenin Toji', 'Itadori Yuuji', 'Gojo Satoru']
const tagGroupRef1 = ref(null)
const handlePopoverClick1 = option => {
  tagGroupRef1.value.setInputValue(option.name)
}
const options = [
  {
    name: 'Zenin Toji',
    src: 'https://www.dexerto.com/cdn-image/wp-content/uploads/2023/11/02/jujutsu-kaisen-toji.jpeg?width=1200&quality=60&format=auto',
    objectFit: 'cover',
    offset: [-6, 36],
    size: 'xs',
    color: 'red',
    border: true,
  },
  {
    name: 'Itadori Yuuji',
    src: 'https://www.comingsoon.net/wp-content/uploads/sites/3/2024/04/jujutsu-kaisen-jin-itadori-family-tree.png',
    objectFit: 'cover',
    offset: [-6, 36],
    size: 'xs',
    color: 'green',
    border: true,
  },
  {
    name: 'Gojo Satoru',
    src: 'https://static0.gamerantimages.com/wordpress/wp-content/uploads/2022/11/gojo-satoru.jpg?q=50&fit=crop&w=1140&h=&dpr=1.5',
    objectFit: 'cover',
    offset: [-6, 36],
    size: 'xs',
    color: 'blue',
    border: true,
  },
]
const handleInput = filterString => {
  popoverAvatarOptions.value = options.filter(option => option.name.toLowerCase().includes(filterString.toLowerCase()))
}
const handleChange = value => {
  console.log(value)
}

With Popover and custom render

NR

Nico Robin

ZT

Zenin Toji

IY

Itadori Yuuji

+0

Vue

<div style="width: 400px; border: 1px solid #ccc; padding: 8px">
  <HLTagGroup ref="tagGroupRef" @update:value="handleChange" :default-value="defaultValues" @input="handleInput">
    <template #popover-content>
      <div class="p-2">
        <div v-if="popoverAvatarOptions.length === 0">
          <HLText>No options found</HLText>
        </div>
        <div
          v-else
          v-for="option in popoverAvatarOptions"
          :key="option.id"
          @click="handlePopoverClick(option)"
          class="cursor-pointer flex items-center gap-2 hover:bg-gray-100 px-1"
        >
          <HLAvatar v-bind="option" size="3xs" />
          <span>{{ option.name }}</span>
        </div>
      </div>
    </template>
    <template #customRender="{ tag, index }">
      <span>{{ tag.name }}</span>
    </template>
    <template #customRenderAvatar="{ tag, index }">
      <HLAvatar v-bind="tag" />
    </template>
  </HLTagGroup>
</div>

TS

const defaultValues = [
  {
    name: 'Nico Robin',
    src: 'https://www.dexerto.com/cdn-image/wp-content/uploads/2025/01/10/Monster-Hunter-World-Hadouken-Only-Challenge.jpg?width=1200&quality=60&format=auto',
    objectFit: 'cover',
  },
  {
    name: 'Zenin Toji',
    src: 'https://www.dexerto.com/cdn-image/wp-content/uploads/2023/11/02/jujutsu-kaisen-toji.jpeg?width=1200&quality=60&format=auto',
    objectFit: 'cover',
  },
  {
    name: 'Itadori Yuuji',
    src: 'https://www.comingsoon.net/wp-content/uploads/sites/3/2024/04/jujutsu-kaisen-jin-itadori-family-tree.png',
    objectFit: 'cover',
  },
]
const tagGroupRef = ref(null)
const popoverAvatarOptions = ref(options)

const handleInput = filterString => {
  popoverAvatarOptions.value = options.filter(option => option.name.toLowerCase().includes(filterString.toLowerCase()))
}
const handleChange = value => {
  console.log(value)
}
const handlePopoverClick = option => {
  tagGroupRef.value.setInputValue(option)
}

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.

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

+0

Vue

<template>
  <div style="width: 400px; border: 1px solid #ccc; padding: 8px">
    <HLTagGroup id="truncated-demo" :default-value="longTags" :truncate="true" :max-width="100" @update:value="handleChange" />
  </div>
</template>
<script setup>
  import { HLTagGroup } from '@platform-ui/highrise'

  const longTags = [
    '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',
  ]

  const handleChange = value => {
    console.log(value)
  }
</script>

Disabled

Blogs

Websites

Funnels

Import

import { HLTagGroup } from '@platform-ui/highrise'

Code

Vue

<HLContentWrap>
  <HLTagGroup id="demo" :defaultValue="defaultValue" :max="5" :disabled="false" :closable="true" :round="true" @on-update="handleChange" />
</HLContentWrap>

ts

const defaultValue = ['Blogs', 'Websites', 'Funnels']

Props

Name	Type	Default	Description
id	string	-	The id of the dynamic tags
defaultValue	array	-	The default value of the dynamic tags
max	number	-	The max number of the dynamic tags
type	'default' | 'error' | 'primary' | 'info' | 'success' | 'warning'	'default'	The type of the dynamic tags
disabled	boolean	false	Whether the dynamic tags is disabled
closable	boolean	true	Whether the dynamic tags is closable
round	boolean	true	Whether the dynamic tags is round
canAddTag	boolean	true	Whether the dynamic tags can add tag
delimiter	Array<'space' | 'comma' | 'enter'>	['enter']	Whether the dynamic tags can add tag on comma or space or enter
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)
interactive	boolean	true	Whether the tags are interactive (show hover effects and cursor pointer)

Emits

Name	Parameters	Description
@on-update	(array)	The value of the dynamic tags is updated
@click	(event, index, tag)	The tag is clicked and the event, index and tag along with the index are returned