<x-bt-tag />
Customize via presets →
Shared presets
x-bt-input component.
Basic Usage
Type text and press Enter, Tab, or leave the field to create a tag. Each tag appears as a chip with a remove button.
1<x-bt-tag label="Tags" placeholder="Add tag..." />Initial Values
Pre-populate the component with an array of tags using the value prop.
1<x-bt-tag label="Skills" :value="['PHP', 'Laravel', 'Vue']" />Separators
By default, tags are split on commas. You can change the separator character(s).
Single Separator
1<x-bt-tag label="Tags" separator=";" placeholder="Separate with semicolons..." />Multiple Separators
Pass a string where each character is a separator, or an array of separator characters. Pasted text is split automatically.
1<x-bt-tag label="Emails" :separator="[',', ';', ' ']" placeholder="Paste or type emails..." />Unique & Max Tags
Enforce uniqueness (default) and limit the number of tags.
1<x-bt-tag label="Allow Duplicates" :unique="false" :value="['hello']" placeholder="Type 'hello' again..." />2<x-bt-tag label="Max 5 Tags" :max-tags="5" placeholder="Limited to 5 tags..." />Sizes
Chip size scales automatically with the input size.
1<x-bt-tag xs label="Extra Small" :value="['Tag']" />2<x-bt-tag sm label="Small" :value="['Tag']" />3<x-bt-tag label="Medium (default)" :value="['Tag']" />4<x-bt-tag lg label="Large" :value="['Tag']" />5<x-bt-tag xl label="Extra Large" :value="['Tag']" />Colors
Two modes: outline (default) with a transparent background and colored ring on focus, and fill with a tinted background matching the color.
Outline Mode
1<x-bt-tag label="Default (primary)" :value="['Tag']" />2<x-bt-tag blue label="Blue" :value="['Tag']" />3<x-bt-tag red label="Red" :value="['Tag']" />4<x-bt-tag green label="Green" :value="['Tag']" />5<x-bt-tag purple label="Purple" :value="['Tag']" />Fill Mode
Use the fill attribute for a tinted background that matches the color.
1<x-bt-tag fill label="Default Fill" :value="['Tag']" />2<x-bt-tag fill blue label="Blue Fill" :value="['Tag']" />3<x-bt-tag fill emerald label="Emerald Fill" :value="['Tag']" />4<x-bt-tag fill purple label="Purple Fill" :value="['Tag']" />Dynamic colors
<x-bt-tag :color="$hasError ? 'red' : 'primary'" />
All available colors
primary, beartropy, red, blue, green, yellow, purple, pink, gray, orange, amber, lime, emerald, teal, cyan, sky, indigo, violet, rose, fuchsia, slate, stone, zinc, neutral.
Slots
Add custom content before or after the chips area. Chrome is automatically stripped.
Start Slot
1<x-bt-tag label="Tags">2 <x-slot:start>3 <x-bt-icon name="tag" class="w-5 h-5 text-gray-400 ml-2" />4 </x-slot:start>5</x-bt-tag>End Slot with Clear All
Use clearAll() from the Alpine scope to remove all tags at once.
1<x-bt-tag label="Tags" :value="['one', 'two', 'three']">2 <x-slot:end>3 <x-bt-button color="gray" soft @click.stop="clearAll()">Clear All</x-bt-button>4 </x-slot:end>5</x-bt-tag>Livewire Integration
When bound with wire:model, the component uses @entangle for two-way binding. Hidden inputs are not rendered in Livewire mode.
Live Binding
Tags: laravel, livewire
1<x-bt-tag2 id="tag-livewire"3 wire:model.live="tags"4 label="Tags"5 placeholder="Add a tag and press Enter"6/>7<p class="text-sm text-gray-500 mt-2">Tags: <strong>{{ implode(', ', $tags) }}</strong></p>Livewire Component
1public array $tags = [];2 3public function mount()4{5 $this->tags = ['laravel', 'livewire'];6}Form Submission
Without wire:model, the component renders hidden <input> elements so tags are submitted as an array.
1<form method="POST" action="/submit">2 @csrf3 <x-bt-tag name="tags" label="Tags" :value="['PHP', 'Laravel']" />4 <x-bt-button type="submit" solid blue class="mt-3">Save</x-bt-button>5</form>Validation Errors
Errors are automatically detected from the Laravel validation error bag using the wire:model name. You can also force an error with customError.
Auto Validation
Submit with no tags to see the error. The border turns red and the error message appears below.
1<x-bt-tag2 id="tag-validated"3 wire:model="validatedTags"4 label="Tags"5 placeholder="Add at least one tag..."6/>7<x-bt-button wire:click="submitTags" solid blue class="mt-3">Submit</x-bt-button>Custom Error
Force an error state regardless of validation using customError.
At least one tag is required
1<x-bt-tag label="Tags" :custom-error="'At least one tag is required'" />Help Text
Use help or hint to display text below the input. When both are provided, hint takes precedence.
Separate with commas
Max 10 tags
1<x-bt-tag label="Tags" help="Separate with commas" />2<x-bt-tag label="Tags" hint="Max 10 tags" />Disabled
Disabled state prevents adding, removing, and focusing the input.
1<x-bt-tag label="Tags" :disabled="true" :value="['locked', 'readonly']" />Keyboard & Paste Behavior
| Key / Action | Behavior |
|---|---|
| Enter | Adds the current input as a tag |
| Tab | Adds the current input as a tag |
| Backspace | Removes the last tag (when input is empty) |
| Paste | Splits pasted text on separator characters into multiple tags |
Real-World Example
A blog post form with tags and a title.
Add up to 10 tags to categorize your post
1<div class="max-w-md space-y-4"> 2 <x-bt-input label="Title" placeholder="Enter post title..." /> 3 <x-bt-tag 4 label="Tags" 5 placeholder="Add tags..." 6 :max-tags="10" 7 help="Add up to 10 tags to categorize your post" 8 :value="['Laravel', 'PHP']" 9 />10 <x-bt-button solid blue class="w-full">Publish Post</x-bt-button>11</div>Slots
| Slot | Description |
|---|---|
start
|
Content before the chips/input area. Chrome is automatically stripped, vertically stretched.
|
end
|
Content after the chips/input area. Chrome is automatically stripped. Use
clearAll() from Alpine scope to clear all tags.
|
Props
| Prop | Type | Default | Description |
|---|---|---|---|
id
|
string|null
|
auto-generated
|
Element ID. Auto-generated as
beartropy-tag-{uniqid} if not provided.
|
name
|
string|null
|
same as id
|
Form input name. Used for hidden inputs (
name[]) in non-Livewire mode.
|
label
|
string|null
|
null
|
Label text above the input.
|
placeholder
|
string
|
Add tag...
|
Placeholder text shown when no tags exist.
|
value
|
array
|
[]
|
Initial list of tags.
|
separator
|
array|string
|
','
|
Character(s) used to split text into tags. Accepts a single string or an array of separator characters.
|
unique
|
bool
|
true
|
Prevents duplicate tags from being added.
|
maxTags
|
int|null
|
null
|
Maximum number of tags allowed. When the limit is reached, new tags are not created.
|
color
|
string|null
|
config default
|
Color preset name. Controls label, border, chip colors, and focus ring.
|
size
|
string|null
|
md
|
Size preset:
xs, sm, md, lg, xl. Chip size scales automatically.
|
disabled
|
bool
|
false
|
Disables the component: existing tags are shown but cannot be added or removed.
|
help
|
string|null
|
null
|
Help text below the field.
|
hint
|
string|null
|
null
|
Hint text below the field. Takes precedence over
help.
|
customError
|
mixed
|
null
|
Custom error message (bypasses the validation error bag).
|