Tag Field

The tag-field component provides a searchable dropdown input with customizable sizes, states, and styling.

Installation

pnpm

pnpm i @vue-interface/tag-field

yarn

yarn add @vue-interface/tag-field

npm

npm i @vue-interface/tag-field

bun

bun i @vue-interface/tag-field

Tailwind Setup

@import '@vue-interface/tag-field/index.css';

Basic Usage

Placeholder

Descriptive Text Field

Some helpful text goes here.

Readonly

Disabled

Disabled (Placeholder)

Clearable

Show Code

<TagField v-model="selected" :options="languages"></TagField>
<TagField :options="options" placeholder="Type to search..." label="Placeholder"></TagField>
<TagField :options="options" label="Descriptive Text Field" help-text="Some helpful text goes here."></TagField>
<TagField :options="options" label="Readonly" placeholder="Type something here..." readonly></TagField>
<TagField :options="options" label="Disabled" disabled></TagField>
<TagField :options="options" placeholder="Disabled" label="Disabled (Placeholder)" disabled></TagField>
<TagField :options="options" label="Clearable" placeholder="Clearable" clearable></TagField>

Plaintext

Display a tag-field as plain text, removing the standard form styling.

Plaintext

Tag

Plaintext Readonly

Tag

Plaintext Disabled

Tag

Show Code

<TagField :options="options" placeholder="Click to search..." :model-value="['Tag']" label="Plaintext" plaintext></TagField>
<TagField :options="options" label="Plaintext Readonly" :model-value="['Tag']" plaintext readonly></TagField>
<TagField :options="options" label="Plaintext Disabled" :model-value="['Tag']" plaintext disabled></TagField>

Custom Tags

The tag-field can be further customized using the following utility classes and props:

Class	Description
allow-custom	Allows custom tags to be added
badge-size	Customize tag size using any badge-[size] class
badge-class	Customize the tag color using any badge-[variant/color] class
active-badge-color	Customize the active tag color using any badge-[variant/color] class
:badge-closeable	Set to :badge-closeable="false" to remove the close button
:badge-close-left	Set to :badge-close-left="true" to move the close button to the left side of the tag

Allow Custom (with options)

Allow Custom (no options)

Customized Tag

Show Code

<TagField allow-custom :options="languages" label="Allow Custom (with options)" placeholder="Type and press enter..."></TagField>
<TagField allow-custom label="Allow Custom (no options)" placeholder="Type anything and press enter..."></TagField>
<TagField 
    :options="options" 
    badge-size="badge-xl" 
    badge-class="badge-danger dark:badge-indigo-400" 
    active-badge-color="badge-yellow-500 dark:badge-primary" 
    :badge-close-left="true" 
    label="Customized Tag" 
    placeholder="Customized Tag">
</TagField>

Sizes

Customize the size using predetermined size, tailwind's numeric sizing classes, or an arbitrary CSS length unit.

Predetermined Sizes

The size can be customized using predetermined size prop values: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl. Use the syntax: form-control-[size].

Show Code

<TagField :options="options" placeholder="form-control-xs" size="form-control-xs"></TagField>
<TagField :options="options" placeholder="form-control-sm" size="form-control-sm"></TagField>
<TagField :options="options" placeholder="form-control-md" size="form-control-md"></TagField>
<TagField :options="options" placeholder="form-control-lg" size="form-control-lg"></TagField>
<TagField :options="options" placeholder="form-control-xl" size="form-control-xl"></TagField>
<TagField :options="options" placeholder="form-control-2xl" size="form-control-2xl"></TagField>
<TagField :options="options" placeholder="form-control-3xl" size="form-control-3xl"></TagField>
<TagField :options="options" placeholder="form-control-4xl" size="form-control-4xl"></TagField>
<TagField :options="options" placeholder="form-control-5xl" size="form-control-5xl"></TagField>

Tailwind Sizes

For more granular control over sizes, use Tailwind's numeric sizing scale classes: form-control-1 - form-control-96

Show Code

<TagField :options="options" placeholder="form-control-3" size="form-control-3"></TagField>
<TagField :options="options" placeholder="form-control-3.5" size="form-control-3.5"></TagField>
<TagField :options="options" placeholder="form-control-4" size="form-control-4"></TagField>
<TagField :options="options" placeholder="form-control-5" size="form-control-5"></TagField>

Arbitrary Sizes

For precise sizing, specify exact pixel values using the syntax form-control-[Npx] or any other CSS length units (rem, em, mm, etc.).

Show Code

<TagField :options="options" placeholder="form-control-[16px]" size="form-control-[16px]"></TagField>
<TagField :options="options" placeholder="form-control-[1.5rem]" size="form-control-[1.5rem]"></TagField>

Validation

Validation classes provide error-checking styling. Use the valid and invalid props.

Empty Array of Errors

Single Inline Error

This is an inline error.

Array of Errors

First Error

Second Error

Multiple Errors From Object

This is an inline error #1.

This is an inline error #2.

Valid Field

Valid Field with Feedback

This is some success message.

Valid Field with Array of Feedback

This is some success message.

This is some success message.

Show Code

<TagField v-model="selected" :options="options" label="Empty Array of Errors" :errors="[]"></TagField>
<TagField :options="options" invalid label="Single Inline Error" error="This is an inline error."></TagField>
<TagField :options="options" invalid label="Array of Errors" :errors="['First Error', 'Second Error']"></TagField>
<TagField :options="options" invalid label="Multiple Errors From Object" :errors="['This is an inline error #1.', 'This is an inline error #2.']"></TagField>
<TagField :options="options" valid label="Valid Field"></TagField>
<TagField :options="options" valid label="Valid Field with Feedback" feedback="This is some success message."></TagField>
<TagField :options="options" valid label="Valid Field with Array of Feedback" :feedback="['This is some success message.', 'This is some success message.']"></TagField>

Custom Colors

Customize the color of a tag-field component with the Tailwind color palette by using the color prop.

Show Code

<TagField :options="options" class="form-control-amber-500" placeholder="form-control-amber-500"></TagField>
<TagField :options="options" class="form-control-green-500" placeholder="form-control-green-500"></TagField>
<TagField :options="options" class="form-control-purple-500" placeholder="form-control-purple-500"></TagField>
<TagField :options="options" class="form-control-neutral-500" placeholder="form-control-neutral-500"></TagField>

Icons

The following tag-field components combine an input field with a heroicon. Customize the size of tag-field/icon combinations using the same sizing prop values described above.

import { CalendarDaysIcon } from '@heroicons/vue/24/outline';

<TagField :options="options">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</TagField>

Show Code

<TagField :options="options" size="form-control-xs" placeholder="xs">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</TagField>
<TagField :options="options" size="form-control-sm" placeholder="sm">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</TagField>
<TagField :options="options" size="form-control-md" placeholder="md">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</TagField>
<TagField :options="options" size="form-control-lg" placeholder="lg">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</TagField>
<TagField :options="options" size="form-control-xl" placeholder="xl">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</TagField>
<TagField :options="options" size="form-control-2xl" placeholder="2xl">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</TagField>
<TagField :options="options" size="form-control-3xl" placeholder="3xl">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</TagField>
<TagField :options="options" size="form-control-4xl" placeholder="4xl">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</TagField>
<TagField :options="options" size="form-control-5xl" placeholder="5xl">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</TagField>
<TagField :options="options" size="form-control-3" placeholder="form-control-3">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</TagField>
<TagField :options="options" size="form-control-3.5" placeholder="form-control-3.5">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</TagField>
<TagField :options="options" size="form-control-4" placeholder="form-control-4">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</TagField>
<TagField :options="options" size="form-control-5" placeholder="form-control-5">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</TagField>
<TagField :options="options" size="form-control-[16px]" placeholder="form-control-[16px]">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</TagField>
<TagField :options="options" size="form-control-[1.5rem]" placeholder="form-control-[1.5rem]">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</TagField>

Activity Indicator

Display an activity indicator within the tag field to indicate loading or processing states.

Small

Medium

Large

Show Code

<TagField :options="options" label="Small" size="form-control-sm" :indicator="Dots" indicator-size="activity-indicator-sm" :activity="showActivity"></TagField>
<TagField :options="options" label="Medium" size="form-control-md" :indicator="Pulse" indicator-size="activity-indicator-sm" :activity="showActivity"></TagField>
<TagField :options="options" label="Large" size="form-control-lg" :indicator="Spinner" indicator-size="activity-indicator-sm" :activity="showActivity"></TagField>