Components

Tags Input

A tag entry field — type and press Enter or comma to add removable chips, with form-array submission.

php artisan blatui:add tags-input

<div class="w-full max-w-sm">
    <x-ui.tags-input name="tags" />
</div>

Disabled

<div class="w-full max-w-sm">
    <x-ui.tags-input name="locked" :value="['Read-only', 'Tags']" disabled />
</div>

Max Tags

<div class="w-full max-w-sm">
    <x-ui.tags-input name="topics" :value="['Design']" :max="3" placeholder="Up to 3 tags…" />
</div>

Prefilled

<div class="w-full max-w-sm">
    <x-ui.tags-input name="frameworks" :value="['Laravel', 'Blade', 'Alpine.js']" />
</div>

Using with Livewire

wire:model

The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind wire:model for two-way state — same component, no wrappers. Full Livewire guide →

app/Livewire/Demo.php

use Livewire\Component;

class Demo extends Component
{
    public array $tags = [];

    public function render()
    {
        return view('livewire.demo');
    }
}

resources/views/livewire/demo.blade.php

<x-ui.tags-input wire:model="tags" />

API Reference

Props, slots and exposed methods for <x-ui.tags-input>.

Props

Prop	Type	Default	Description
`name`	`string`	—	Form field name. Each tag is submitted as a hidden input named "{name}[]", so the value arrives as an array.
`value`	`array`	`[]`	Initial tags to prefill. Duplicate values are ignored when adding new tags.
`placeholder`	`string`	`__('Add tag…')`	Placeholder text shown in the text field while it is empty.
`max`	`int`	—	Maximum number of tags allowed. Once reached, the input is disabled until a tag is removed. No limit when omitted.
`disabled`	`bool`	`false`	Disable the whole control: no tags can be added or removed.
`id`	`string`	—	Id applied to the inner text field, for pairing with an external label.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method	Description
`add()`	Commits the current draft as a tag (trimmed). No-op when empty, a duplicate, or at the max. Also fired on Enter, comma, and blur.
`remove(i)`	Removes the tag at index i. Ignored when the control is disabled.