Basic
Svelte
jsrepo
Installation
jsrepo add ui/tags-input
Usage
Custom Validation
For most of the validation and transformation you will need to do you can use the validate property.
For example let's say you want to make all of the tags lowercase.
Write a custom validate function:
import type { TagsInputProps } from '$lib/components/ui/tags-input/types';
export const customValidate: TagsInputProps['validate'] = (val, tags) => {
// trim and convert to lowercase
const transformed = val.trim().toLowerCase();
// disallow empties
if (transformed.length === 0) return undefined;
// disallow duplicates
if (tags.find((t) => transformed === t.toLowerCase())) return undefined;
return transformed;
};
Pass the function to the <TagsInput/> component:
svelte
jsrepo