ChipInput

Tag input: type and press Enter or comma to add, Backspace to remove the last. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

Vue

import { UiChipInput } from '@ziyarago/ui/vue'

With values

LanguagesArabicEnglishUzbek

Vue

<UiChipInput label="Languages" v-model="value" />

Empty

Keywords

Vue

<UiChipInput
  label="Keywords"
  placeholder="Type and press Enter"
  v-model="value"
 />

Max items

Preferred citiesMakkahMadinahUp to 3

Vue

<UiChipInput
  label="Preferred cities"
  hint="Up to 3"
  :max-items="3"
  v-model="value"
 />

Sizes

LanguagesArabicEnglishLanguagesArabicEnglishLanguagesArabicEnglishLanguagesArabicEnglishLanguagesArabicEnglish

Vue

<UiChipInput size="xs" label="Languages" v-model="value" />

<UiChipInput size="sm" label="Languages" v-model="value" />

<UiChipInput size="md" label="Languages" v-model="value" />

<UiChipInput size="lg" label="Languages" v-model="value" />

<UiChipInput size="xl" label="Languages" v-model="value" />

API reference

Input that turns typed text into removable chips. Use for tags, keywords and email lists.

Props

PropType and valuesDefaultDescription

modelValuev-modelstring[]'[]'Current chips.

maxItemsnumber—Maximum number of chips. Extra entries are ignored.

labelstring—Label shown above the control.

placeholderstring—Placeholder, shown only while there are no chips.

hintstring—Helper text under the control. Hidden while error is set.

errorstring—Error message under the control. Turns the control red and is announced with role="alert".

sizexssmmdlgxl'md'Control height, font and padding scale.

Events

Vue: @name. React: onName.

changeCalled with the new array when a chip is added or removed.

Notes

Enter or comma adds a chip, Backspace on empty input removes the last one. Duplicates are ignored.