v3.5.0 is out! Dozens of significant improvements overall! Keep your TallStackUI up to date to get the best experience.

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.
<x-tag />
Select your preferred frameworks
<x-tag label="Frameworks" hint="Select your preferred frameworks" />

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" />

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" />

An option to set a single-character prefix.

<x-tag prefix="#" />
The prefix must be a single character.
<!--
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}`)" />

Code highlighting provided by Torchlight