Quasar Chips Textbox     

Basic Usage

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

The model variable must be an Array.

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.

Error State

Add has-error CSS class:

<q-chips v-model="model" class="has-error"></q-chips>

Vue Properties

Vue PropertyTypeDescription
readonlyBooleanIf readonly user can not add or remove chips.
disableBooleanIf disabled user can not add or remove chips.
placeholderStringPlaceholder for the textfield.

Vue Methods

Vue MethodDescription
add(value)Adds value to the model.
remove(index)Removes value at index in model.
focus()Focuses the input text field.

Vue Events

Vue EventDescription
@inputTriggered on model value change with the new value.

Inside of a List Usage

<div class="list">
<div class="item multiple-lines">
<i class="item-primary">edit</i>
<div class="item-content">
<q-chips v-model="model"></q-chips>