Form Tag

>= v1.10

Form tag component.

Tag, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

TallStackUi::personalize()
    ->form('tag')
    ->block('block', 'classes');

The soft personalization should be done in boot method of service providers.

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

Frameworks

Select your preferred frameworks

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

# Limit Options

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

Frameworks

Select your preferred frameworks

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

# 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}`)" />

# Invalidate

An option to not show validation error message.

<x-tag invalidate />