Tags Input
Interactive tags input component with suggestions, validation, and drag-and-drop support
Basic Usage
The most basic tags input component:
Tags
tags
<neura::field>
<neura::label>Tags</neura::label>
<neura::tags-input placeholder="Add tags..." />
</neura::field>With Livewire
Use
wire:model or x-model to bind tags to a Livewire property:
Tags
tags
<neura::tags-input wire:model="tags" placeholder="Add tags..." />
// In your Livewire component:
public $tags = [];Maximum Tags
Limit the number of tags that can be added:
Tags (Max 5)
/ 5
tags
<neura::tags-input maxTags="5" placeholder="Add up to 5 tags..." />Tag Length Validation
Set minimum and maximum length for each tag:
Tags (3-20 characters)
tags
<neura::tags-input
minTagLength="3"
maxTagLength="20"
placeholder="Tags must be 3-20 characters..."
/>Allow Duplicates
Control whether duplicate tags are allowed:
Tags (Duplicates Allowed)
tags
<neura::tags-input allowDuplicates="true" placeholder="Duplicates allowed..." />With Suggestions
Provide predefined suggestions that users can select from:
Skills
tags
<neura::tags-input
:suggestions="['Laravel', 'PHP', 'JavaScript', 'Vue.js', 'React']"
placeholder="Select or add skills..."
/>Blocked Words
Prevent certain words from being used as tags:
Tags
tags
<neura::tags-input
:blockedWords="['admin', 'test', 'demo']"
placeholder="Add tags..."
/>Split Keys
Customize which keys create new tags (default: space, comma, semicolon):
Tags (Press Enter or comma)
tags
<neura::tags-input
:splitKeys="[',']"
placeholder="Add tags..."
/>Tag Colors
Customize tag colors using the
tagColor prop:
Default Color
tags
Blue Tags
tags
Green Tags
tags
<neura::tags-input tagColor="blue" placeholder="Add tags..." />
<neura::tags-input tagColor="green" placeholder="Add tags..." />
<neura::tags-input tagColor="red" placeholder="Add tags..." />Tag Variants
Choose between
rounded (default) or pill variants:
Rounded Tags
tags
Pill Tags
tags
<neura::tags-input tagVariant="rounded" placeholder="Add tags..." />
<neura::tags-input tagVariant="pill" placeholder="Add tags..." />Options
Control various behaviors with options:
Tags (No Counter, No Clear)
tags
<neura::tags-input
showCounter="false"
showClearAll="false"
placeholder="Add tags..."
/>Use Cases
Skill Selection
Skills
/ 10
tags
Categories
Product Categories
/ 5
tags
Best Practices
Do
- Provide clear placeholder text to guide users
- Set appropriate maxTags limit to prevent excessive tags
- Use suggestions for common tags to improve UX
- Block inappropriate words when necessary
- Set reasonable min/max tag lengths
- Show counter when maxTags is set
Don't
- Allow unlimited tags without validation
- Use too many blocked words (provide clear feedback instead)
- Forget to validate tags on the server side
- Use overly restrictive tag length limits
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| placeholder | string | 'Add tags...' | Placeholder text for the input |
| maxTags | int|null | null | Maximum number of tags allowed |
| minTagLength | int | 1 | Minimum character length for a tag |
| maxTagLength | int | 50 | Maximum character length for a tag |
| allowDuplicates | bool | false | Allow duplicate tags |
| suggestions | array | [] | Array of suggested tags |
| blockedWords | array | [] | Array of blocked words |
| splitKeys | array | [' ', ',', ';'] | Keys that create new tags |
| tagColor | string | 'default' | Tag color variant |
| tagVariant | string | 'rounded' | Tag style: 'rounded' or 'pill' |
| showCounter | bool | true | Show tag counter |
| showClearAll | bool | true | Show clear all button |
| disabled | bool | false | Disable the input |