Apple

Banana

Installation

pnpm dlx kliping@latest add tags-input

Examples

Tags dengan Listbox

Nuxt

Remix

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@lucide/vue@^1.31.0, @vueuse/core@^14.4.0, reka-ui@^2.10.3
Files	components/ui/tags-input/tags-input.vue components/ui/tags-input/tags-input-input.vue components/ui/tags-input/tags-input-item.vue components/ui/tags-input/tags-input-item-delete.vue components/ui/tags-input/tags-input-item-text.vue components/ui/tags-input/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<TagsInput>
  <TagsInputItem>
    <TagsInputItemText />
    <TagsInputItemDelete />
  </TagsInputItem>
  <TagsInputInput />
</TagsInput>

API Reference

TagsInput

Prop	Type	Default	Description
modelValue?	AcceptableInputValue[]	—	The controlled value of the tags input. Can be bind as v-model.
defaultValue?	AcceptableInputValue[]	—	The value of the tags that should be added. Use when you do not need to control the state of the tags input
addOnPaste?	boolean	—	When true, allow adding tags on paste. Work in conjunction with delimiter prop.
addOnTab?	boolean	—	When true allow adding tags on tab keydown
addOnBlur?	boolean	—	When true allow adding tags blur input
duplicate?	boolean	—	When true, allow duplicated tags.
disabled?	boolean	—	When true, prevents the user from interacting with the tags input.
delimiter?	string | RegExp	—	The character or regular expression to trigger the addition of a new tag. Also used to split tags for @paste event
dir?	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.
max?	number	—	Maximum number of tags.
id?	string	—	The id of the rendered element.
convertValue?	((value: string) => AcceptableInputValue)	—	Convert the input value to the desired type. Mandatory when using objects as values and using TagsInputInput
displayValue?	((value: AcceptableInputValue) => string)	—	Display the value of the tag. Useful when you want to apply modifications to the value like adding a suffix or when using object as values
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
name?	string	—	The name of the field. Submitted with its owning form as part of a name/value pair.
required?	boolean	—	When true, indicates that the user must set the value before the owning form can be submitted.

Event	Payload	Description
@update:modelValue	[payload: AcceptableInputValue[]]	Emitted when the value changes.
@invalid	[payload: AcceptableInputValue]	Emitted when a new value is rejected (duplicate or over max).
@addTag	[payload: AcceptableInputValue]	Emitted when a tag is added, with its value.
@removeTag	[payload: AcceptableInputValue]	Emitted when a tag is removed, with its value.

Slot	Props
#default	{ modelValue: AcceptableInputValue[]; }

TagsInputInput

Prop	Type	Default	Description
placeholder?	string	—	The placeholder character to use for empty tags input.
autoFocus?	boolean	—	Focus on element when mounted.
maxLength?	number	—	Maximum number of character allowed.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

TagsInputItem

Prop	Type	Default	Description
value	AcceptableInputValue	—	Value associated with the tags
disabled?	boolean	—	When true, prevents the user from interacting with the tags input.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

TagsInputItemDelete

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

TagsInputItemText

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Keyboard Interactions

Perilaku keyboard-nya datang dari primitif Reka UI TagsInput yang dipakai komponen ini, mengikuti pola WAI-ARIA.

Key	Description
Delete	When tag is active, remove it and set the tag on right active.
Backspace	When tag is active, remove it and set the tag on left active. If there are no tags to the left, either the next tags gets focus, or the input.
ArrowRight	Set the next tag active.
ArrowLeft	Set the previous tag active.
Home	Set the first tag active
End	Set the last tag active

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --background, --border, --destructive, --input, --radius, --ring, --secondary.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.