Tags Input

The <x-wirekit::tags-input> component allows free-form tag creation. Users type text and press Enter or comma to create a tag chip. Each chip has a remove button, and the combined values are submitted as an array.

Basic Usage

<x-wirekit::tags-input label="Tags" name="tags" placeholder="Add a tag..." />

With Preexisting Tags

<x-wirekit::tags-input
    label="Technologies"
    name="technologies"
    :value="['Laravel', 'Livewire', 'Alpine.js']"
    placeholder="Add more..."
/>

With Max Tags

<x-wirekit::tags-input
    label="Keywords"
    name="keywords"
    :max-tags="3"
    hint="You can add up to 3 keywords."
/>

When the maximum is reached, the text input is disabled and a screen-reader announcement confirms the limit.

Error State

<x-wirekit::tags-input label="Tags" name="tags-error-demo" error="At least one tag is required." />

Width

Like all WireKit form components, the tags input fills its container (w-full). Control the width via the parent element:

<div class="max-w-md">
    <x-wirekit::tags-input label="Skills" name="skills" />
</div>

See Input — Width for more layout examples (grid columns, mixed widths).

Keyboard Behavior

Duplicate tags are silently ignored — the same tag cannot appear twice.

Form Submission

Each tag is submitted via a hidden <input type="hidden" name="name[]">, so Laravel receives a plain array of strings.

Optimistic UI

Pass the name of the Livewire method the field should call and the set is sent the moment a tag is added or removed:

<x-wirekit::tags-input
    name="labels"
    label="Labels"
    :value="$labels"
    optimistic="saveLabels"
/>

Load wirekit-optimistic.js alongside whichever bundle you already use — below it, in your layout:

@wirekitScripts
<script src="{{ asset('vendor/wirekit/wirekit-optimistic.js') }}"></script>

Try it

The demo below runs the real path: the change shows immediately, the outline says it is provisional, and the server's answer either confirms it silently or takes it back.

{{-- In your app there is no host: your own Livewire component owns the method. --}}
<x-wirekit::tags-input
    name="labels"
    label="Labels"
    :value="$labels"
    optimistic="saveLabels"
/>

The <livewire:demos.…> wrapper above exists only on this site — it supplies the demo methods so the page can show a real round trip. The block under it is what you write.

A refusal keeps the change rather than undoing it. A tag is typed, so undoing a failed add would delete what you just wrote. Removal takes the same exit for a structural reason: the set is one value, so a rollback restores the whole set — there is no way to undo a removal without also undoing an addition that happened alongside it. A refused removal therefore stays removed and says so, which is recoverable: the tag is one keystroke away.

The field is not marked invalid. aria-invalid means this value is wrong, and a save that failed on the network says nothing about the tags.

Props

Accessibility

• The input area uses role="group" with aria-label matching the label text
• Each tag chip uses role="listitem" inside a role="list" container
• Remove buttons have aria-label="Remove {tag}" for screen readers
• Tag creation and removal are announced via aria-live="polite" region
• When maxTags is reached, the input gets aria-disabled="true" and a polite announcement
• aria-invalid="true" and aria-describedby set on error or hint
• All chip remove icons are aria-hidden="true" — the button label provides the accessible name

Keyboard Interaction

Pitfalls

• Don't use tags-input for a closed taxonomy. If the user must pick from a fixed list, <x-wirekit::multi-select> is correct. Tags-input is for free-form entry (skills, keywords, emails).
• Don't allow duplicates without thought. The component dedupes by string equality — case-sensitive. If you want case-insensitive dedup, normalize on the server before persisting.

Design Tokens

Customization

Override defaults in config/wirekit.php:

'components' => [
    'tags-input' => ['placeholder' => 'Type and press Enter...', 'maxTags' => 10],
],

Further Reading

• MDN: role="list" and role="listitem"
• MDN: aria-live
• MDN: aria-disabled
• WebAIM: Creating Accessible Forms