README

Tag input component with suggestions and validation for Laravel applications. Supports max tags limit, duplicate prevention, and autocomplete suggestions. Works with Livewire and Vue 3.

Installation

composer require mrshanebarron/tags-input

Livewire Usage

Basic Usage

<livewire:sb-tags-input :tags="['Laravel', 'Vue.js', 'Tailwind']" />

With Placeholder

<livewire:sb-tags-input placeholder="Add a skill..." />

With Max Tags Limit

<livewire:sb-tags-input :max-tags="5" />

With Suggestions

<livewire:sb-tags-input
    :suggestions="['PHP', 'JavaScript', 'Python', 'Ruby', 'Go']"
    placeholder="Select or type a language..."
/>

Allow Duplicates

<livewire:sb-tags-input :allow-duplicates="true" />

Custom Separator

<livewire:sb-tags-input separator=";" />

Livewire Props

Events

<livewire:sb-tags-input @tags-updated="handleTagsUpdate" />

The tags-updated event includes the current tags array.

Vue 3 Usage

Setup

import { SbTagsInput } from './vendor/sb-tags-input';
app.component('SbTagsInput', SbTagsInput);

Basic Usage

<template>
  <SbTagsInput v-model="tags" />
</template>

<script setup>
import { ref } from 'vue';
const tags = ref(['Vue', 'React', 'Angular']);
</script>

With Options

<template>
  <SbTagsInput
    v-model="tags"
    placeholder="Add technology..."
    :max-tags="10"
    :suggestions="['Docker', 'Kubernetes', 'AWS', 'Azure']"
    @updated="onTagsChange"
  />
</template>

Vue Props

Events

Handling Tags in Backend

// In your Livewire component
public array $tags = [];

#[On('tags-updated')]
public function handleTagsUpdate(array $tags): void
{
    $this->tags = $tags;
}

public function save(): void
{
    // Save as JSON
    $model->tags = json_encode($this->tags);

    // Or use Laravel's array cast
    $model->tags = $this->tags;
}

Keyboard Support

• Enter: Add current input as tag
• Comma (or custom separator): Add tag
• Backspace: Remove last tag when input is empty
• Arrow keys: Navigate suggestions

Styling

The tags input includes:

• Pill-style tags with remove button
• Hover effects on tags
• Dropdown suggestions list
• Focus ring on input

Requirements

• PHP 8.1+
• Laravel 10, 11, or 12
• Tailwind CSS 3.x
• Alpine.js

License

MIT License