Tags Input

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

Props

autofocus

Boolean (default: false)

If true, the input will be instantly focused when the form is created

disabled

Boolean (default: false)

If true, the input is disabled and cannot be filled in or edited

icon

String (default: null)

Sets the icon, that is shown on the right next to the input.

id

String (default: null)

The id for the input element.

layout

String (default: null)

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 (default: null)

The maximum number of accepted tags

min

Number (default: null)

The minimum number of required tags

name

String (default: null)

The name of the input element.

options

Array (default: null)

Defines all options that are available. Options must be defined as an array of objects:

[
  { value: 'a', text: 'Option A' },
  { value: 'b', text: 'Option B' },
  { value: 'c', text: 'Option C' }
]

Options will be shown in the autocomplete dropdown as soon as you start typing.

required

Boolean (default: false)

If true, the input must not be empty

theme

String (default: null)

By default, inputs are as unstyled as possible to provide a clean boilerplate. If you need the typical field input look, you can set the theme to field

value / v-model

Array (default: null)

Methods

focus()

The focus event can be used to set the focus on the input.

Events

@input

The input event is triggered when the value changes.

@invalid

The invalid event is triggered when the input validation fails. This can be used to react on errors immediately.

CSS class

.k-tags-input