Tag

Used for marking and selection.

Basic usage

Use the type attribute to define Tag's type. In addition, the color attribute can be used to set the background color of the Tag.

Removable Tag

closable attribute can be used to define a removable tag. It accepts a Boolean. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the disable-transitions attribute, which accepts a Boolean, to true. close event triggers when Tag is removed.

Edit Dynamically

You can use the close event to add and remove tag dynamically.

Tag Input

Sizes

Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.

Use attribute size to set additional sizes with large, default or small.

Theme

Tag provide three different themes: dark、light and plain

Using effect to change, default is light

Rounded

Tag can also be rounded like button.

Attributes

Name	Description	Type	Accepted Values	Default
type	component type	string	primary / red / green / blue / teal / orange / yellow	—
closable	whether Tag can be removed	boolean	—	false
disable-transitions	whether to disable animations	boolean	—	false
hit	whether Tag has a highlighted border	boolean	—	false
color	background color of the Tag	string	—	—
size	tag size	string	large / default / small	default
effect	component theme	string	dark / light / plain	light
round	whether Tag is rounded	boolean	—	false

Events

Name	Description	Parameters
click	triggers when Tag is clicked	—
close	triggers when Tag is removed	—

Slots

Name	Description
—	customize default content

CheckTag Attributes

Name	Description	Type	Accepted Values	Default
checked	is checked	boolean	true / false	—

CheckTag Events

Name	Description	Parameters
change	triggers when Check Tag is clicked	checked

CheckTag Slots

Name	Description
—	customize default content

Tag Input Attributes

Name	Description	Type	Accepted Values	Default
v-model	value	string[]	—	—
commitKey	commit new item when press this key	string	, (comma)	false
tab-index	must set >= 0 to show blinking cursor	number	0	false
placeholder	show when model value is empty	string	—	false
validator	function to make sure new item has valid format	function	(value: string) => boolean	—
size	tag size	string	large / default / small	default
round	whether Tag is rounded	boolean	—	false

Tag Input Events

Name	Description	Parameters
error	triggers when has error when adding new item	type: 'none' / 'duplicate' / 'validation' / 'required'