Chips Input     

The Quasar Chips Input allows user to enter a group of text items, which is also editable in the form of quick deletion of the Chips in the list.

For more details on Chips used within Chips Input, please refer to its documentation.

For autocomplete functionality, also refer to QAutocomplete documentation.

Works well with QField for additional functionality such as a helper, error message placeholder and many others.

Installation

Edit /quasar.conf.js:

framework: {
  components: ['QChipsInput']
}

Basic Usage

<q-chips-input v-model="model" />

<!-- Disabled -->
<q-chips-input v-model="model" disable />

<!-- With floating label -->
<q-chips-input v-model="model" float-label="Floating Label" />

<!-- With custom placeholder -->
<q-chips-input v-model="model" placeholder="Type some names" />

<!-- On error state -->
<q-chips-input v-model="model" error />

The model variable must be an Array.

The user can remove a Chip by clicking/tapping on the close icon. Adding a Chip is done by clicking/tapping on the component, typing and then hitting the send icon or <ENTER> key. Pressing Backspace key either removes content of the textfield or if that is empty then the last Chip.

Vue Properties

Supports v-model which should be binded to an Array of Strings in your scope.

Also note you can use the native DOM attributes of an input: “max-length”, “autocomplete” and so on.

Common input field properties:

Also note you can use the native DOM attributes of an input: “name”, “max-length”, “autocomplete” and so on. They are applied to the native <input> contained by QChipsInput.

Common input frame properties:

Icon buttons

This section refers to before and after properties which can add additional buttons as icons to the textfield. Here is the structure of the two properties:

{
  // required icon
  icon: String,
  // required function to call when
  // icon is clicked/tapped
  handler: Function,

  // Optional. Show icon button
  // if model has a value
  content: Boolean,

  // Optional. Show icon button
  // if textfield is marked with error
  error: Boolean
}

Examples:

<q-chips-input
  v-model="model"
  color="secondary"
  :after="[
    {
      icon: 'warning',
      error: true,
      handler () {
        // do something...
      }
    }
  ]"
/>

Coloring

As you may have noticed above, there’s a “color”, “chips-color” and “chips-bg-color” along with “inverted”/“inverted-light” and “dark” properties.
By default, if you only use “color” then the input frame and Chips will share the color. If there’s also a “chips-color” or “chips-bg-color” specified then the encapsulated chips’ colors will be overwritten.
When you want the frame inverted (color is applied to background), then specify “inverted” property. Use “inverted-light” when the color is light.
When used on a dark background, specify “dark” property.

<!-- Use a color. -->
<q-chips-input color="secondary" v-model="model" />

<!-- Use a color on inverted mode (background gets colored). -->
<q-chips-input color="secondary" v-model="model" />

<!--
  Coloring the encapsulated Chips.
-->
<q-chips-input
  color="amber"
  chips-color="yellow"
  chips-bg-color="black"
  inverted-light
  v-model="model"
/>

<!--
  When we use the component on a dark background,
  so we specify "dark" property.
-->
<div class="bg-grey-9" style="padding: 15px">
  <q-chips-input dark color="amber" v-model="model" />
</div>

Lazy Input

Vue will soon supply the .lazy modifier for v-model on components too, but until then, you can use the longer equivalent form:

<q-chips-input
  :value="model"
  @change="val => { model = val }"
/>

Autocomplete

You can use QAutocomplete to provide the user a list of values to select from.
While the list of found values is open <ENTER> key will select a value from it and add it to the list.
If you want to add a value not found in the list either hit the send icon or press <ESC> key to hide the list and then the <ENTER> key.

<q-chips-input v-model="model" placeholder="Add from list or new ones">
  <q-autocomplete @search="search" @selected="selected" />
</q-chips-input>

Vue Methods

Vue Events

More Examples

Wrapped with QField

<q-field
  icon="account_box"
  label="Birthday"
  :count="10"
  helper="Some helper here"
>
  <q-chips-input float-label="Float Label" v-model="model" />
</q-field>

Usage Inside of a List

<q-list>
  <q-item multiline>
    <q-item-side icon="edit" />
    <q-item-main>
      <q-chips-input v-model="model" placeholder="Type names"/>
    </q-item-main>
  </q-item>
</q-list>