Nova Tag Input Field

This plugin incorporate the Vue Tags Input plugin by Johannes Munari into Laravel Nova by creating a new field type.

Nova 4

This release must be used with Nova version 4 and above. Thanks to @dmason30 for the PR. To install a Nova 3 compatible version please see at the end.

Installing

Using Composer:

composer require superlatif/nova-tag-input

Example

Basic

Tags::make(__("Tags"), 'tags')
    ->help("Press ENTER to add tag")
    ->placeholder("Add a new tag")
    ->allowEditTags(true)
    ->addOnKeys([13, ':', ';', ',']) // 13 = Enter key
    ->autocompleteItems([
        'Arizona',
        'California',
        'Colorado',
        'Michigan',
        'New York',
        'Texas',
    ]),

Autocomplete items from Eloquent

$tags = Tag::pluck('title')->get();
Tags::make(__("Tags"), 'tags')
    // ...
    ->autocompleteItems($tags)
    // ...

Parameters

| Parameter | Description | Type | Default | | ---------------------------- | ------------------------------------------------------------------------ | ------- | ---------- | | autocompleteItems | Array of strings used for autocompletion | Array | - | | addOnKeys | Set of characters triggering tag insertion | Array | [13] | | separators | Defines characters which split text into tags (useful when copy-pasting) | Array | [';'] | | placeholder | Hint displayed when the field is empty or after a list of existing tags | String | - | | addFromPaste | Tags can be created from pasted text | Boolean | true | | addOnBlur | Tag is created when field loses focus | Boolean | true | | addOnlyFromAutocomplete | Only allow tag creation from the autocompleteItems array | Boolean | false | | allowEditTags | Allow inline tag edition | Boolean | false | | autocompleteAlwaysOpen | Autocomplete list remains open | Boolean | false | | autocompleteFilterDuplicates | Removes duplicates from autocomplete list | Boolean | true | | autocompleteMinLength | The minimum text that must be entered before autocomplete | Boolean | 1 | | avoidAddingDuplicates | Prevent duplicated tags | Boolean | true | | deleteOnBackspace | Delete tags using backspace | Boolean | true | | disabled | Disable the field | Boolean | false | | maxTags | Max number of tags | Boolean | - |

Installing

To use a Nova 3 compatible version please use the following command:

composer require superlatif/nova-tag-input:3.0

Support us!

If you think we saved you some time on your development, please consider showing your appreciation 😁