Tags input

<k-tags-input>

kirby/panel/src/components/Forms/Input/TagsInput.vue

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.

Props

Prop	Type	Default	Description
accept	`string`	"all"
autofocus	`boolean`	–
disabled	`boolean`	–
icon	`string`\|`boolean`	"tag"
id	`number`\|`string`	function() { return this._uid; }
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`	–
options	`array`	[]	Options will be shown in the autocomplete dropdown as soon as you start typing.
required	`boolean`	–
separator	`string`	","
value	`array`	[]

Events

Event	Description	Passes
input		–
invalid		`undefined`

Example

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

CSS classes

.k-tags-input