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)
}

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

Emits

Name	Parameters	Description
@on-update	(array)	The value of the dynamic tags is updated