Accessible Tags Input using daisyUI

[iamandrewluca]

Screen.Recording.2023-11-21.at.20.38.44.mov

When the input is empty:

• Enter: Parent form will submit
• Backspace: Remove the last tag

<template>
	<form @submit="onSubmit">
		<div class="form-control">
			<label class="label" for="tags">
				<span class="label-text">Introduce tags:</span>
			</label>
			<TagsInput
				id="tags"
				v-model="searchTerm"
				v-model:tags="tags"
				placeholder="Add Tag"
			/>
		</div>
	</form>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import TagsInput from './tags-input.component.vue';

const searchTerm = ref('');
const tags = ref(['lorem', 'ipsum', 'dolor']);

function onSubmit(e: Event) {
	e.preventDefault();
	console.log('submit');
}
</script>

Code:

<template>
	<fieldset class="flex flex-wrap gap-2">
		<legend class="sr-only">Tags Input</legend>
		<button
			v-for="(tag, index) in tags"
			:key="tag"
			class="btn uppercase"
			type="button"
			@click="tagRemove(tag)"
		>
			{{ tag }}
			<XCircleIcon v-if="index < tags.length - 1" class="h-6 w-6" />
			<BackspaceIcon v-else class="h-6 w-6" />
		</button>

		<input
			:id="id"
			:value="modelValue"
			type="text"
			:placeholder="placeholder"
			class="input grow"
			@keydown.backspace="onKeydownBackspace"
			@keydown.enter="onKeydownEnter"
			@input="onInput"
		/>
	</fieldset>
</template>

<script setup lang="ts">
import { BackspaceIcon, XCircleIcon } from '@heroicons/vue/24/outline';

const emit = defineEmits<{
	'update:modelValue': [value: string];
	'update:tags': [value: string[]];
}>();

const props = defineProps<{
	id?: string;
	placeholder?: string;
	modelValue: string;
	tags: string[];
}>();

function onKeydownEnter(e: KeyboardEvent) {
	if (props.modelValue) {
		e.preventDefault();
		emit('update:tags', [...props.tags, props.modelValue]);
		emit('update:modelValue', '');
	}
}

function onKeydownBackspace(e: KeyboardEvent) {
	if (!props.modelValue) {
		e.preventDefault();
		emit('update:tags', props.tags.slice(0, props.tags.length - 1));
	}
}

function tagRemove(tag: string) {
	emit(
		'update:tags',
		props.tags.filter((t) => t !== tag),
	);
}

function onInput(e: Event) {
	emit('update:modelValue', (e.target as HTMLInputElement).value);
}
</script>

[saadeghi]

Wow that's really clean! Thank you 🔥

I think you can also use the input class on a div to contain all the buttons and input all together. This way it would look like the tag is inside the input.
And maybe it would look better with smaller button size for the tags 🤔

[iamandrewluca]

Exactly that's what I did 🔥 I left the example clean so everyone can style it however they want.

I also tried the method to make tags absolute on top of input, and make input padding-top and left dynamic, but is quite tricky. I wanted when input is focused the focus to be around everything tags + input.

To have the result as in this image, in the code example I showed:

• add border input-bordered p-2 rounded-box to fieldset element
• add btn-sm to button element, and input-sm to input element