Alpine.jsで作るタグ入力（Tag Input）UIの実装

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

<div x-data="tagComponent()" class="container">
    <div class="tag-input-wrapper">
        <template x-for="(tag, index) in tags" :key="index">
            <span class="chip">
                <span x-text="tag"></span>
                <button type="button" @click="removeTag(index)">&times;</button>
            </span>
        </template>

        <input 
            type="text" 
            x-model="newTag" 
            @keydown.enter.prevent="addTag"
            @keydown.space.prevent="addTag"
            @keydown.backspace="handleBackspace"
            placeholder="タグを入力..." 
        >
    </div>
</div>

.container {
    padding: 20px;
    max-width: 400px;
    margin: 0 auto;
}

.tag-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
}

.tag-input-wrapper:focus-within {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

.chip {
    display: flex;
    align-items: center;
    background: #e1ecf4;
    color: #39739d;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
}

.chip button {
    background: none;
    border: none;
    margin-left: 6px;
    cursor: pointer;
    font-weight: bold;
}

input {
    border: none;
    outline: none;
    flex: 1;
    min-width: 100px;
}

function tagComponent() {
    return {
        tags: ['Alpine.js', 'UI'],
        newTag: '',
        addTag() {
            const val = this.newTag.trim();
            if (val && !this.tags.includes(val)) {
                this.tags.push(val);
            }
            this.newTag = '';
        },
        removeTag(index) {
            this.tags.splice(index, 1);
        },
        handleBackspace() {
            if (this.newTag === '' && this.tags.length > 0) {
                this.tags.pop();
            }
        }
    }
}