Basic Usage

<x-tag-input name="tags" />

Props

• label - string (label text)
• name - string (input name)
• id - string|null (input id, auto-generated if not provided)
• tags - array (default: [], initial tags array)
• placeholder - string (default: 'Type and press comma or enter...')
• options - array|null (dropdown options: [['value' => '1', 'label' => 'Option 1'], ...])
• hint - string (hint text)
• error - bool (error state)
• errorMessage - string (error message)
• required - bool (required field)
• disabled - bool (disabled state)
• size - string|null (default: null, alternatives: 'sm', 'lg')

Livewire Integration

<x-tag-input wire:model="tags" />

The component uses wire:model for real-time synchronization with Livewire component properties. Tags are automatically synced as an array.

Examples

<!-- Basic -->
<x-tag-input name="tags" />

<!-- With initial tags -->
<x-tag-input name="tags" :tags="['Tag 1', 'Tag 2']" />

<!-- With dropdown options -->
<x-tag-input 
    name="tags" 
    :options="[
        ['value' => '1', 'label' => 'Option 1'],
        ['value' => '2', 'label' => 'Option 2'],
    ]"
/>

<!-- With label and hint -->
<x-tag-input 
    name="tags" 
    label="Tags"
    hint="Add tags by typing and pressing comma"
/>

<!-- Livewire -->
<x-tag-input wire:model="tags" />

<!-- Sizes -->
<x-tag-input name="tags" size="sm" />
<x-tag-input name="tags" size="lg" />

Features

• Type and press comma or Enter to add tags
• Click X button to remove tags
• Press Backspace on empty input to remove last tag
• Dropdown options for selecting from predefined list
• Filter dropdown options as you type
• Arrow keys to navigate dropdown
• Livewire integration with wire:model
• Prevents duplicate tags
• Dark mode support

Keyboard Shortcuts

• Comma or Enter - Add tag
• Backspace - Remove last tag (when input is empty)
• Arrow Down - Navigate dropdown down
• Arrow Up - Navigate dropdown up
• Escape - Close dropdown