Logo Beartropy

Tag Input

The x-tag component is a modern, customizable tag/chip input.
Supports custom separators, presets for chips, scrollable layout and full Livewire support.
Combine any features for advanced UX.
You can customize this component

Basic Usage

The tag input lets users add multiple values as chips.
Useful for skills, labels, emails, or keywords.
- Press Enter or the chosen separator to add.
- Tags are unique by default and scroll when there are too many.

Press Enter to add each tag. Max 8.

blade 
            
1<x-tag
2    name="skills"
3    label="Skills"
4    placeholder="Add skill…"
5    :value="['Laravel', 'Livewire']"
6    max-tags="8"
7    help="Press Enter to add each tag. Max 8."
8/>

Custom Separator

Custom separators: Use separator prop to accept any character(s) as tag boundary.
Example: :separator="[';', ',', ' ']" allows comma, semicolon, or space.
This works on both typing and pasting.

Type an email and press Enter, comma, semicolon, or space.

blade 
            
1<x-tag
2    name="emails"
3    label="Emails"
4    :separator="[';', ',', ' ']"
5    placeholder="Add emails…"
6    help="Type an email and press Enter, comma, semicolon, or space."
7/>

With Start/End Slots

You can use start and end slots for icons, badges, or custom content.
This integrates seamlessly with your UI presets.
blade 
            
 1<x-tag
 2    name="tags"
 3    label="Tags"
 4>
 5    <x-slot name="start">
 6        <x-heroicon-o-tag class="w-4 h-4" />
 7    </x-slot>
 8    <x-slot name="end">
 9        <x-heroicon-o-sparkles class="w-4 h-4" />
10    </x-slot>
11</x-tag>

Presets for Tag Input

Presets are available out of the box.
Chips use chip_bg, chip_text, and chip_close from your input preset.
Just add the color as prop (e.g. blue, red, etc).
blade 
            
1<x-tag label="Default" />
2<x-tag blue label="Blue" />
3<x-tag red label="Red" />
4<x-tag violet label="Violet" />
5<x-tag rose label="Rose" />

Filled

Presets are available out of the box.
Chips use chip_bg, chip_text, and chip_close from your input preset.
Just add the color as prop (e.g. blue, red, etc).
blade 
            
1<x-tag fill label="Default" />
2<x-tag fill blue label="Blue" />
3<x-tag fill red label="Red" />
4<x-tag fill violet label="Violet" />
5<x-tag fill rose label="Rose" />

Props

Table of props
Showing to of results

Tips

Usage Tips

  • Scroll: The field grows up to ~5 rows, then scrolls (won't break layout).
  • Presets: Chips use chip_bg, chip_text, and chip_close from input presets.
  • Livewire: Full wire:model support, array sync out of the box.
  • Separator: Use separator="," or :separator="[';',',',' ']" for maximum flexibility.
  • Validation: Combine max-tags and unique for robust UX.
Code highlighting provided by Torchlight