Skip to content

Kirby 3.9.8

Tags field

<k-tags-field>

This UI component hasn't been finalized yet. The functionality and syntax aren't stable and might be redone in an upcoming release. Only use it at your own risk - breaking changes are likely to occur.

Have a look at <k-field>, <k-input> and <k-tags-input> for additional information.

Props

Prop Type Default Description
accept
string
"all"
after
string
autofocus
boolean
before
string
counter
boolean
true
disabled
boolean
endpoints
object
help
string
icon
string|boolean
"tag"
id
number|string
function() { return this._uid; }
input
string|number
invalid
boolean
label
string
layout
string
You can set the layout to list to extend the width of each tag to 100% and show them in a list. This is handy in narrow columns or when a list is a more appropriate design choice for the input in general.
max
number
The maximum number of accepted tags
min
number
The minimum number of required tags
name
number|string
novalidate
boolean
false
options
array
[]
Options will be shown in the autocomplete dropdown as soon as you start typing.
required
boolean
separator
string
","
theme
string
translate
boolean
type
string
value
array
[]

Events

Event Description Passes
blur
focus

Slots

Slot Description
after
before
counter
default
footer
header
help
icon
label
options

Example

<k-tags-field
    v-model="tags"
    :options="[
        { value: 'a', text: 'Design' },
        { value: 'b', text: 'Architecture' }
    ]"
    name="tags"
  label="Tags"
/>

CSS classes

.k-tags-field