Tag Input Input Number

🌏 Translated with the assistance of DeepSeek and ChatGPT

An input box specifically for entering tags. If you need to input a series of texts, this might be useful.

Basic Usage

This component is used for tag input. Press Enter after typing to add a tag.

For the tag list, pass the modelValue prop to enable controlled mode. If not passed or set to undefined, it is uncontrolled mode, and you can use the defaultValue prop as the default value.

For the input text, pass the inputValue prop to enable controlled mode. If not passed or set to undefined, it is uncontrolled mode, and you can use the defaultInputValue prop as the default value.

Madoka

Sayaka

Mami

modelValue: [ "Sayaka", "Mami" ]; inputValue: Kyoko

<template>
	<px-space direction="vertical">
		<px-input-tag
			placeholder="Please input"
			:default-value="['Madoka']"
			default-input-value="Homura"
		></px-input-tag>
		<px-input-tag
			placeholder="Please input"
			v-model="tags"
			v-model:input-value="inputValue"
		></px-input-tag>
		<span>modelValue: {{ tags }}; inputValue: {{ inputValue }}</span>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tags = ref<string[]>(['Sayaka', 'Mami'])
const inputValue = ref('Kyoko')
</script>

<style lang="css" scoped>
.px-input-tag {
	width: 640px;
}
</style>

Collapsed Tags

Set the collapseTags prop to enable collapsed tags (default is false). The maxDisplayTags prop sets the maximum number of tags to display. The collapseTagsPopover prop controls whether the collapsed tags are shown in a popover (default is true).

<template>
	<px-space direction="vertical">
		<px-input-tag
			placeholder="Please input"
			v-model="tags"
			collapse-tags
			:max-display-tags="8"
		></px-input-tag>
		<px-input-tag
			placeholder="Please input"
			v-model="tags"
			collapse-tags
			:max-display-tags="8"
			:collapse-tags-popover="false"
		></px-input-tag>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tags = ref<string[]>([])
</script>

<style lang="css" scoped>
.px-input-tag {
	width: 640px;
}
</style>

Tag Limit

Use the maxLength prop to limit the number of tags.

<template>
	<px-input-tag placeholder="Please input" v-model="tags" :max-length="12"></px-input-tag>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tags = ref<string[]>([])
</script>

<style lang="css" scoped>
.px-input-tag {
	width: 640px;
}
</style>

Tag Style

Use the tagVariant prop to set the tag style variant, tagTheme to control the tag theme, and tagColor to customize the tag theme color.

<template>
	<px-space direction="vertical">
		<px-input-tag placeholder="Please input" v-model="tags"></px-input-tag>
		<px-input-tag placeholder="Please input" v-model="tags" tag-variant="plain"></px-input-tag>
		<px-input-tag placeholder="Please input" v-model="tags" tag-theme="primary"></px-input-tag>
		<px-input-tag placeholder="Please input" v-model="tags" tag-color="#E956AE"></px-input-tag>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tags = ref<string[]>([])
</script>

<style lang="css" scoped>
.px-input-tag {
	width: 640px;
}
</style>

Custom Tag Content

Customize tag content via the tag slot.

<template>
	<px-input-tag placeholder="Please input" v-model="tags">
		<template #tag="{ tag, index }">
			<div style="display: flex; align-items: center">
				<IconUser style="margin-right: 4px"></IconUser> {{ index }}.{{ tag }}
			</div>
		</template>
	</px-input-tag>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { IconUser } from '@pixelium/web-vue/icon-hn/es'

const tags = ref<string[]>([])
</script>

<style lang="css" scoped>
.px-input-tag {
	width: 640px;
}
</style>

More Options

InputTag also has some features of the Input component.

Disabled, Readonly, Loading & Clearable

Size

Count

Slot

feat:

Pixel Art

Dark Mode

Status

Expose

<template>
	<px-space direction="vertical">
		<h4>Disabled, Readonly, Loading & Clearable</h4>
		<px-space>
			<px-input-tag placeholder="Please input" disabled></px-input-tag>
			<px-input-tag placeholder="Please input" readonly></px-input-tag>
			<px-input-tag placeholder="Please input" loading></px-input-tag>
			<px-input-tag placeholder="Please input" clearable></px-input-tag>
		</px-space>
		<h4>Size</h4>
		<px-space>
			<px-input-tag placeholder="Please input" size="small"></px-input-tag>
			<px-input-tag placeholder="Please input"></px-input-tag>
			<px-input-tag placeholder="Please input" size="large"></px-input-tag>
		</px-space>
		<h4>Count</h4>
		<px-space>
			<px-input-tag placeholder="Please input" show-count> </px-input-tag>
			<px-input-tag placeholder="Please input" show-count :max-length="255"> </px-input-tag>
		</px-space>
		<h4>Slot</h4>
		<px-space>
			<px-input-tag placeholder="Please input" :default-value="['Pixel Art', 'Dark Mode']">
				<template #prefix>feat:</template>
			</px-input-tag>
			<px-input-tag placeholder="Please input">
				<template #append>
					<IconBolt></IconBolt>
				</template>
			</px-input-tag>
		</px-space>
		<px-space>
			<px-input-group>
				<px-input-group-label>
					<IconBolt></IconBolt>
				</px-input-group-label>
				<px-input-tag placeholder="Please input"> </px-input-tag>
				<px-button>Confirm</px-button>
			</px-input-group>
		</px-space>
		<h4>Status</h4>
		<px-space>
			<px-input-tag placeholder="Please input"> </px-input-tag>
			<px-input-tag placeholder="Please input" status="success"> </px-input-tag>
			<px-input-tag placeholder="Please input" status="warning"> </px-input-tag>
			<px-input-tag placeholder="Please input" status="error"> </px-input-tag>
		</px-space>
		<h4>Expose</h4>
		<px-space direction="vertical">
			<px-space>
				<px-button theme="info" @click="focusHandler">Focus</px-button>
				<px-button theme="info" @click="blurHandler">Blur</px-button>
				<px-button theme="warning" @click="clearHandler">Clear</px-button>
			</px-space>
			<px-input-tag placeholder="Please input" ref="inputTagRef"></px-input-tag>
		</px-space>
	</px-space>
</template>

<script setup lang="ts">
import { IconBolt } from '@pixelium/web-vue/icon-hn/es'
import { ref } from 'vue'
import { InputTag } from '@pixelium/web-vue'

// If on-demand import
// import { InputTag } from '@pixelium/web-vue/es'

const inputTagRef = ref<InstanceType<typeof InputTag>>(null)

const focusHandler = () => {
	inputTagRef.value?.focus()
}
const blurHandler = () => {
	inputTagRef.value?.blur()
}
const clearHandler = () => {
	inputTagRef.value?.clear()
}
</script>

<style lang="css" scoped>
.px-input-tag {
	width: 400px;
}
</style>

API

InputTagProps

Attribute	Type	Optional	Default	Description	Version
modelValue	string[] | null	True		The value of the tag input box (controlled mode), supports v-model.	0.0.2
defaultValue	string[] | null	True		The default value of the tag input box (uncontrolled mode).	0.0.2
inputValue	string | null	True		The value of the internal text input box (controlled mode), supports v-model.	0.0.2
defaultInputValue	string | null	True		The default value of the internal text input box (uncontrolled mode).	0.0.2
placeholder	string	True		Placeholder text.	0.0.2
disabled	boolean	True	false	Disabled state.	0.0.2
readonly	boolean	True	false	Read-only state.	0.0.2
clearable	boolean	True	false	Whether to show the clear button.	0.0.2
loading	boolean	True	false	Whether to show the loading state.	0.0.2
size	'medium' | 'large' | 'small'	True	'medium'	Input box size.	0.0.2
shape	'default' | 'round'	True	'default'	Input box shape.	0.0.2
borderRadius	NumberOrPercentage | NumberOrPercentage[]	True		Border radius, takes precedence over shape, same behavior as CSS border-radius; single value or array of length 1 → applies to all corners; array of length 2 → [top left & bottom right, top right & bottom left]; array of length 3 → [top left, top right & bottom left, bottom right]; array of length 4 → applies to each corner clockwise.	0.0.2
maxLength	number	True		Maximum input length.	0.0.2
collapseTags	boolean	True	false	Whether to enable collapsed tags.	0.0.2
collapseTags	number	True		Whether to enable collapsed tags.	0.0.2
collapseTagsPopover	boolean	True	true	Whether to show collapsed tags in a popover, effective when collapseTags is enabled.	0.0.2
tagTheme	'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info'	True	'info'		0.0.2
tagVariant	'primary' | 'plain' | 'outline'	True	'plain'		0.0.2
tagColor	string	True			0.0.2
status	'success' | 'warning' | 'error' | 'normal'	True	'normal'	Form validation status.	0.0.2
autofocus	boolean	True	false	Native <input> autofocus attribute.	0.0.2

InputTagEvents

Event	Parameter	Description	Version
update:modelValue	value: string[]	Callback to update modelValue.	0.0.2
tagAdd	value: string, e: KeyboardEvent	Callback when a tag is added.	0.0.2
tagClose	value: string, index: number, e: MouseEvent	Callback when a tag is closed.	0.0.2
change	value: string[]	Callback when the tag list changes.	0.0.2
input	value: string, e: Event	Callback when the input box receives input.	0.0.2
update:inputValue	value: string	Callback when inputValue is updated.	0.0.2
inputChange	value: string, e: Event | undefined	Callback when the input content changes.	0.0.2
clear	value: string[]	Callback when the clear button is clicked and the content is cleared.	0.0.2
blur	e: FocusEvent	Callback when the input box loses focus.	0.0.2
focus	e: FocusEvent	Callback when the input box is focused.	0.0.2

InputTagSlots

Slot	Parameter	Description	Version
prefix		Prefix content.	0.0.2
suffix		Suffix content.	0.0.2
tag	tag: string, index: number	Tag content.	0.0.2

InputTagExpose

Attribute	Type	Optional	Default	Description	Version
focus	() => void	False			0.0.2
blur	() => void	False			0.0.2
clear	() => void	False			0.0.2

NumberOrPercentage

export type NumberOrPercentage = number | `${number}%`