Skip to content

Pro Component — This component requires an Aura UI Pro license.

Overview

The Tags Input component provides a text field where users can add and remove tags. It supports autocomplete suggestions from a predefined list, custom tag creation, a maximum tag limit, and keyboard-driven interaction. Tags are displayed as removable chips within the input area. Integrates with Livewire via wire:model.

Basic Usage

<x-aura::tags-input
    label="Tags"
    name="tags"
    placeholder="Add a tag..."
    wire:model="tags"
/>

Props

Prop Type Default Description
label string '' Label text displayed above the input.
name string '' Input name attribute, also used for wire:model.
placeholder string 'Add a tag...' Placeholder text shown in the text input.
maxTags int|null null Maximum number of tags allowed. null for unlimited.
suggestions array [] Array of suggestion strings shown as the user types.
allowCustom bool true Allow users to create tags not in the suggestions list.

Examples

Article Tags

<x-aura::tags-input
    label="Article Tags"
    name="tags"
    placeholder="Add tags..."
    :maxTags="5"
    :suggestions="['Laravel', 'PHP', 'JavaScript', 'Vue.js', 'Tailwind', 'Alpine.js', 'Livewire']"
    :allowCustom="true"
    wire:model="tags"
/>

Skills Input with Suggestions Only

<x-aura::tags-input
    label="Skills"
    name="skills"
    placeholder="Select skills..."
    :suggestions="[
        'PHP', 'Laravel', 'JavaScript', 'TypeScript', 'React', 'Vue.js',
        'Python', 'Docker', 'AWS', 'PostgreSQL', 'Redis', 'Git',
    ]"
    :allowCustom="false"
    :maxTags="10"
    wire:model="skills"
/>

Free-Form Tags Without Suggestions

<x-aura::tags-input
    label="Keywords"
    name="keywords"
    placeholder="Type and press Enter..."
    :suggestions="[]"
    :allowCustom="true"
    wire:model="keywords"
/>

Livewire Form Integration

<!-- Blade view -->
<form wire:submit="save">
    <div class="space-y-4">
        <x-aura::input label="Post Title" name="title" wire:model="title" />

        <x-aura::tags-input
            label="Categories"
            name="categories"
            :suggestions="$availableCategories"
            :allowCustom="false"
            :maxTags="3"
            placeholder="Select up to 3 categories..."
            wire:model="selectedCategories"
        />

        @error('selectedCategories')
            <p class="text-sm text-red-600">{{ $message }}</p>
        @enderror

        <x-aura::tags-input
            label="Tags"
            name="tags"
            :suggestions="$popularTags"
            :allowCustom="true"
            :maxTags="8"
            placeholder="Add tags..."
            wire:model="tags"
        />

        <x-aura::button type="submit">Publish</x-aura::button>
    </div>
</form>

// Livewire component
class PostEditor extends Component
{
    public string $title = '';
    public array $selectedCategories = [];
    public array $tags = [];
    public array $availableCategories = [];
    public array $popularTags = [];

    public function mount(): void
    {
        $this->availableCategories = Category::pluck('name')->toArray();
        $this->popularTags = Tag::orderByDesc('usage_count')->limit(20)->pluck('name')->toArray();
    }

    protected function rules(): array
    {
        return [
            'title' => 'required|string|max:255',
            'selectedCategories' => 'required|array|min:1|max:3',
            'tags' => 'array|max:8',
        ];
    }

    public function save(): void
    {
        $this->validate();

        $post = Post::create(['title' => $this->title]);
        $post->syncCategories($this->selectedCategories);
        $post->syncTags($this->tags);

        $this->dispatch('toast', type: 'success', message: 'Post published.');
    }
}

With Max Tags Limit

<x-aura::tags-input
    label="Interests"
    name="interests"
    placeholder="Add up to 5 interests..."
    :maxTags="5"
    :allowCustom="true"
    wire:model="interests"
/>

Slots

Slot Description
default Not used. Tags and suggestions are managed via props and internal state.

Live Demo

/8

3/8 tags used. Type to see suggestions or add custom tags.

Current Tags:
Laravel Livewire Tailwind

Accessibility

  • The input area uses role="combobox" with aria-autocomplete="list" when suggestions are available.
  • Each tag chip has a remove button with aria-label="Remove [tag name]".
  • The suggestions dropdown uses role="listbox" with items as role="option".
  • aria-activedescendant tracks the highlighted suggestion.
  • Enter or Comma adds the current text as a tag (or selects the highlighted suggestion).
  • Backspace on an empty input removes the last tag.
  • Arrow Up/Down navigate through suggestions.
  • Escape closes the suggestions dropdown.
  • When maxTags is reached, the input shows a disabled state with an appropriate aria-label message.
  • The label is associated with the input via for/id attributes.