Logo Beartropy UI
Tag
The x-bt-tag component is an interactive tag/chip input.
It lets users type free-form values, press Enter / Tab / blur to create tags,
remove them with the Backspace key or the small (×) button, and integrates perfectly with Livewire.

Basic Usage

Start typing and press Enter, Tab, or leave the field (blur) to create a new tag.
Each tag appears as a chip with a small remove button. 

1<x-bt-tag
2    label="Tags"
3    placeholder="Add tag..."
4/>

Initial Tags

You can pre-populate the component with an array of tags using the :value prop. 

1<x-bt-tag
2    label="Skills"
3    placeholder="Add skill..."
4    :value="['PHP', 'Laravel', 'Livewire']"
5/>

Custom Separators &amp; Paste

By default, tags are created when pressing Enter/Tab or on blur.
You can also configure one or more separators so that pasting or typing a string splits into multiple tags automatically. In this example, both ; and , are treated as separators. 

1<x-bt-tag
2    label="Emails"
3    placeholder="Paste or type emails..."
4    :separator="[';', ',']"
5/>

Unique Tags &amp; Max Tags

You can prevent duplicate tags with :unique="true" (default)
and optionally limit how many tags can be created using max-tags. 

1<x-bt-tag
2    label="Tags (max 5)"
3    placeholder="Type and press Enter..."
4    :max-tags="5"
5    :unique="true"
6/>

Livewire Integration

When bound with wire:model, the component keeps the array of tags fully in sync with Livewire.
Internally it uses entangle with initialTags, so every add/remove operation updates the Livewire property automatically.

Tags: laravel, livewire 
1<span>Tags: {{ implode(', ', $tags) }}</span>
2 
3<x-bt-tag
4    label="Tags"
5    placeholder="Add a tag and press Enter"
6    wire:model.live="tags"
7/>

Livewire Component Example 

1public array $tags = [];
2 
3public function mount()
4{
5    $this->tags = ['laravel', 'livewire'];
6}

Props

Prop Type Default Description
label
string|null null
Optional text label displayed above the tag input. Supports basic HTML (e.g. <b>, <code>) via Blade.
placeholder
string Add tag...
Placeholder shown inside the input when there are no tags.
Once at least one tag exists, the placeholder is hidden.
value
array []
Initial list of tags when wire:model is not used.
Example: :value="['php', 'laravel']".
separator
string|array ','
Character(s) used to split text into tags when pasting or typing.
Accepts:
  • A single string, e.g. ',' or ';'.
  • An array of separators, e.g. [';', ','].
unique
bool true
When true, prevents duplicate tags from being added.
If a user types a tag that already exists, it is ignored.
maxTags
int|null null
Optional maximum number of tags allowed.
When the limit is reached, new tags are not created.
disabled
bool false
Disables the component: existing tags are shown but cannot be edited,
and the input is not focusable.
help
string|null null
Optional helper text rendered below the field via the field-help component.
customError
string|null null
Custom error message to force an error state even without validation errors.
When present, it is displayed below the field and the border/ring switch to error colors.
color
string|null null
Color preset key, mapped via the input presets.
Controls label color, border, background, chip colors, etc.
size
string|null null
Optional size preset key inherited from the input presets (font size, paddings, etc.).
wire:model
Livewire binding null
Binds the tags array to a Livewire property.
The property must be an array, for example: public array $tags = [];
Adding/removing tags updates Livewire automatically via entangle.
start / end
slot null
Optional slots rendered at the start and end of the input container.
Useful for icons, counters, or additional actions next to the tags.
name
string|null null
Optional field name. Primarily useful when integrating with custom form handling.
In most cases you will rely on wire:model instead.
Code highlighting provided by Torchlight