TallStackUI 4.0 is here! Seven new components and thousand of improvements. See what's new .

Powerful suite of Blade components for TALL Stack apps

Form Tag

Form tag component.

In desktop devices the tags can be inserted by pressing the enter or comma keys, and can be removed by pressing the backspace key. In mobile devices the tags can only be inserted using enter key.

# Basic Usage 

<x-tag />

# Label & Hint

Select your preferred frameworks 
<x-tag label="Frameworks" hint="Select your preferred frameworks" />

# Readonly & Disabled 

<x-tag label="Readonly" :value="['Laravel', 'Livewire']" readonly />
<x-tag label="Disabled" :value="['Laravel', 'Livewire']" disabled />

# Limit Options

An option to limit the number of tags that can be added.

Select your preferred frameworks 
<x-tag label="Frameworks" hint="Select your preferred frameworks" :limit="2" />

# Lazy

An option to silently reject tags whose typed content is shorter than the given minimum.

Tags with less than 3 characters will be silently rejected 
<!-- Reject tags shorter than the given minimum.   -->
<!-- The prefix character does not count toward it. -->
 
<x-tag :lazy="3" />
 
<x-tag prefix="@" :lazy="3" />
 
<x-tag :lazy="3" :limit="5" wire:model="tags" />

# Prefix

An option to set a single-character prefix. 

<x-tag prefix="#" />
The prefix must be a single character.

# Events 

<!--
For the erase event the correct index is
$event.detail.tags instead of $event.detail.tag
-->
 
<x-tag x-on:add="alert(`Introduced: ${$event.detail.tag}`)"
       x-on:remove="alert(`Removed: ${$event.detail.tag}`)"
       x-on:erase="alert(`Erased: ${$event.detail.tags}`)" />
Event Detail Fired when
add { tag } A tag is introduced
remove { tag } A tag is removed
erase { tags } All tags are erased

# Options

An option to display a pre-existing list of tags 

<x-tag wire:model="tags" :options="Tag::pluck('name')" />

Matching is case-insensitive, and a typed value that matches an option is stored with the option's casing. Typing Alpine and confirming adds alpine when that is the option. A prefix is ignored while comparing, so LARAVEL still finds #laravel . A match that is already picked is skipped as a duplicate. Typing a tag that matches no option is stored as typed.

# Slot After

An option to display content when dealing with a search that returns no results. 

<x-tag wire:model="tags" :options="['laravel', 'livewire', 'alpine', 'tailwind']">
    <x-slot:after>
        <p class="font-medium text-red-500 p-4">After slot goes here</p>
    </x-slot>
</x-tag>
On select.styled and autocomplete the slot of the same name replaces the empty message and appears only when nothing matches. Here it sits below the list at all times, because it exists to reach an action rather than to explain an empty result.

Code highlighting provided by Torchlight