#Tags Input Component

#Introduction

The tags-input component provides a powerful and flexible way to handle multiple tags or keywords input. It features autocomplete suggestions, drag-and-drop reordering, validation, persistence, and full accessibility support. Perfect for skills, categories, keywords, or any multi-value input scenario.

#Installation

Use the fluxtor artisan command to install the tags-input component easily:

php artisan fluxtor:install tags-input

#Basic Usage

<x-ui.tags-input 
    wire:model="tags"  
    placeholder="Add tags..."
/>

#Bind To livewire

to use with livewire you need to only to use wire:mode="tags" to bind your tags state

#Using it within Blade & Alpine

you can use it outside livewire and just alpine (with blade):

<div class="w-full" x-data="{ tags: ['convergephp','fluxtor','eigenify']}">
    <x-ui.tags-input 
        x-model="tags" 
        placeholder="Add tags..."
    />
</div>

because we're making this possible using the x-modelable API so you can't use state as a name variable because the component use it internally

#Customization

#Tag Variants

Control the visual appearance of your tags with different shapes.

<x-ui.tags-input 
    wire:model="tags" 
    placeholder="Rounded tags (default)"
    tagVariant="rounded"
/>
<x-ui.tags-input 
    wire:model="tags" 
    placeholder="Pill-shaped tags"
    tagVariant="pill"
/>

#Tag Color

by default tags input uses the primary color but you can any tailwind color you want:

<div class="space-y-6 max-w-2xlw-full mx-auto h-[25rem] overflow-y-auto p-4">
    @foreach([
        'red', 'orange', 'amber', 'yellow', 'lime', 'green',
        'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo',
        'violet', 'purple', 'fuchsia', 'pink', 'rose',
    ] as $color)
            @php
                $placeholder = "Add new $color tag ";
            @endphp
            <x-ui.tags-input 
                wire:model.defer="fake"
                :placeholder="$placeholder"
                tagVariant="rounded"
                class="mb-2"
                :tagColor="$color"
            />
    @endforeach
</div>

#Advanced Features

#Suggestions and Autocomplete

Provide users with helpful suggestions as they type.

<x-ui.tags-input 
    wire:model="skillTags" 
    placeholder="Type to see suggestions..."
    :suggestions="['PHP', 'Laravel', 'Vue.js', 'Alpine.js', 'Tailwind CSS', 'JavaScript', 'Python', 'React', 'Node.js']"
/>

to force of choosing only predifined tags you by setting :allowCustom="false"

<x-ui.tags-input 
    wire:model="skillTags" 
    :allowCustom="false"
    placeholder="Type something isn't in the suggestions list"
    :suggestions="['PHP', 'Laravel', 'Vue.js', 'Alpine.js', 'Tailwind CSS', 'JavaScript', 'Python', 'React', 'Node.js']"
/>

#Validation and Constraints

Set limits and validation rules to ensure data quality.

<x-ui.tags-input 
    wire:model="constrainedTags" 
    placeholder="Max 3 tags, 2-10 characters each"
    :max-tags="3"
    :min-tag-length="2"
    :max-tag-length="10"
    :show-counter="true"
/>

#Custom Separators

Define which keys should create new tags.

use can use this feature when you want to paste formated data in specific format

<x-ui.tags-input 
    wire:model="customSeparators" 
    placeholder="Use asterik, comma, space or semicolon to separate"
    :split-keys="['*',' ', ',', ';']"
/>

#Bulk Operations

Enable counter display and clear all functionality.

<x-ui.tags-input 
    wire:model="bulkTags" 
    placeholder="Tags with counter and clear all"
    :show-counter="false"
    :show-clear-all="false"
/>

#States and Validation

#Disabled State

<x-ui.tags-input 
    wire:model="disabledTags" 
    placeholder="Disabled tags input"
    disabled
/>

#Character Validation

Restrict input to specific character patterns.

<x-ui.tags-input 
    wire:model="alphanumericTags" 
    placeholder="Only alphanumeric characters allowed"
    allowed-chars="^[a-zA-Z0-9]+$"
/>

#Blocked Words

while you can't use character validation as previsouly but for conveniece you can prevent specific words from being added as tags expecitly.

<x-ui.tags-input 
    wire:model="filteredTags" 
    placeholder="Try typing 'spam' or 'test'"
    :blocked-words="['spam', 'test', 'admin']"
/>

#Auto-Sorting

Automatically sort tags alphabetically.

<x-ui.tags-input 
    wire:model="sortedTags" 
    placeholder="Tags will be sorted automatically"
    :sort-tags="true"
/>

you can change the direction using the sort-direction="desc"

#Drag and Drop

Users can reorder tags by dragging and dropping them.

The component includes zero dependency built-in drag-and-drop functionality. Simply drag tags to reorder them.

<x-ui.tags-input 
    x-model="tags" 
    placeholder="Add tags and drag to reorder"
/>

#Component Props