Tag input
acun:tag-input provides free-form or list-based tag entry. Suggestions are matched case-insensitively, following Turkish letter rules. To let users pick one or more values from a long list, use acun:combobox on the Combobox page.
Tag input
Type text and turn it into a tag with Enter or a comma; Backspace in the empty box deletes the last tag. The same tag is not added twice. Initial tags are given as an array with value.
<acun:tag-input name="tags" label="Tags" :value="['priority', 'wholesale']" />| Prop | Values |
|---|---|
value | Initial tags (array) |
placeholder | Type and press Enter |
Choosing from a list, with a limit
When suggestions is given, only values from this list can be added, and up to six suggestions are shown while typing. max limits the number of tags that can be added.
<acun:tag-input name="categories" label="Categories" :suggestions="['Electronics', 'Clothing', 'Books', 'Home & living', 'Sports']" :value="['Electronics']" :max="3" />| Prop | Values |
|---|---|
suggestions | Allowed values |
max | Maximum number of tags |
Disabled
disabled locks the component and shows it with a gray background: you cannot type in the box and the tags' remove buttons are hidden. In a classic form, the hidden fields are disabled too, so no value is submitted.
<acun:tag-input name="locked_tags" label="Tags" :value="['priority', 'wholesale']" disabled />| Prop | Values |
|---|---|
disabled | true | false (default false) |
With Alpine
On Alpine pages the component binds to an outside array with x-model; as tags are added the array updates, and as the array changes the component updates. Other attributes such as class and data-* are added to the component's outer container.
<div x-data="{ tags: ['priority'] }" class="space-y-2">
<acun:tag-input x-model="tags" label="Tags" />
<p class="text-sm text-gray-600 dark:text-zinc-400">Tags: <span x-text="tags.join(', ')"></span></p>
</div>| Prop | Values |
|---|---|
x-model | Array |
class | Added to the outer container |
In a form and with Livewire
In a classic form, each tag is submitted with a hidden field named name[]. When wire:model is given, the array is written directly to the Livewire property; hidden fields are still added with the property's name, so acun:form dirty-check and acun:form-actions see tag changes. When a tag is added or removed, the component dispatches a change event; text typed in the box does not count as a change. The component does not show validation errors itself; add them with @error if needed.
<acun:tag-input wire:model="tags" label="Tags" :suggestions="$tagOptions" />
@error('tags')
<p class="text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror| Prop | Values |
|---|---|
wire:model | Array |
change | When a tag is added or removed (bubbles) |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
label | null | Label above |
value | [] | Initial tags |
placeholder | Type and press Enter | Text in the empty box |
suggestions | [] | If given, only values from this list can be chosen |
max | null | Maximum number of tags |
disabled | false | Turns off typing and removing; hidden fields are not submitted |
wire:model / x-model | — | Livewire or Alpine binding (array) |