A full featured, unstyled tag input component for React
npm install emblor-maintainedhttps://github.com/JaleelB/shadcn-tag-input/assets/78449846/7f678789-ef5e-4913-b26c-9317003d6dbc
Emblor is a fully-featured tag input component designed for seamless integration into any project — styled your way or ready to adopt the sleek aesthetics of Shadcn's design system
- Customizable: Emblor is unstyled by default, allowing you to easily style it to fit your design system.
- Accessible: Emblor is built with accessibility in mind, ensuring that it is usable by everyone.
- Easy to use: Emblor provides a simple and easy to use API that allows you to quickly integrate a tag input component into your project.
To install Emblor, run the command:
``bash`
pnpm add emblor
Here's a sample implementation that initializes the component with a list of initial tags and suggestions list. Apart from this, there are multiple events, handlers for which need to be set.
The example below uses tailwindcss @shadcn/ui tailwind-merge clsx:
`tsx
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Tag, TagInput } from '@/components/tag-input';
import Link from 'next/link';
import { Button, buttonVariants } from '@/components/ui/button';
import { z } from 'zod';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import React from 'react';
import { toast } from '@/components/ui/use-toast';
const FormSchema = z.object({
topics: z.array(
z.object({
id: z.string(),
text: z.string(),
}),
),
});
export default function Hero() {
const form = useForm
resolver: zodResolver(FormSchema),
});
const [tags, setTags] = React.useState
const { setValue } = form;
function onSubmit(data: z.infer
toast({
title: 'You submitted the following values:',
description: (
{JSON.stringify(data, null, 2)}
),
});
}
return (
Shadcn Tag Input
An implementation of a Tag Input component built on top of Shadcn UI's input component.
${buttonVariants({ variant: 'default', size: 'lg' })} min-w-[150px] shadow-sm}>${buttonVariants({ variant: 'secondary', size: 'lg' })} shadow-sm
Try it out
className={}
>
Github
To create a detailed API Reference section in your README for the Emblor tag input component, you can structure it similarly to the OTPInput example you provided. Here's a structured API reference that incorporates the properties and options of the Emblor tag input:
---
API Reference
$3
The primary component for user interaction. Configure the tag input behavior and appearance using these props, and manage tag data dynamically.
#### Props
typescript
type TagInputProps = {
// Placeholder text for the input.
placeholder?: string; // default: "" // Array of tags displayed as pre-selected.
tags: Array<{ id: string; text: string }>; // default: []
// Function to set the state of tags.
setTags: React.Dispatch>;
// Enable or disable the autocomplete feature.
enableAutocomplete?: boolean; // default: false
// List of autocomplete options.
autocompleteOptions?: Array<{ id: string; text: string }>; // default: []
// Maximum number of tags allowed.
maxTags?: number; // default: null
// Minimum number of tags required.
minTags?: number; // default: null
// Make the input read-only.
readOnly?: boolean; // default: false
// Disable the input.
disabled?: boolean; // default: false
// Callback function when a tag is added.
onTagAdd?: (tag: string) => void; // default: null
// Callback function when a tag is removed.
onTagRemove?: (tag: string) => void; // default: null
// Allow duplicate tags.
allowDuplicates?: boolean; // default: false
// Maximum length of a tag.
maxLength?: number; // default: null
// Minimum length of a tag.
minLength?: number; // default: null
// Function to validate a tag.
validateTag?: (tag: string) => boolean; // default: null
// Character used to separate tags.
delimiter?: Delimiter; // default: null
// Show the count of tags.
showCount?: boolean; // default: false
// Placeholder text when tag limit is reached.
placeholderWhenFull?: string; // default: ""
// Sort tags alphabetically.
sortTags?: boolean; // default: false
// List of characters that can be used as delimiters.
delimiterList?: string[]; // default: []
// Truncate tag text to a certain length.
truncate?: number; // default: null
// Function to filter autocomplete options.
autocompleteFilter?: (option: string) => boolean; // default: null
// Layout direction of the tag inputs.
direction?: 'row' | 'column'; // default: 'row'
// A callback function that is called whenever the input value changes.
onInputChange?: (value: string) => void; // default: null
// A callback function that is used to render custom tag elements.
customTagRenderer?: (tag: { id: string; text: string }) => React.ReactElement; // default: null
// Function to be called when the input field gains focus.
onFocus?: React.FocusEventHandler; // default: null
// Function to be called when the input field loses focus.
onBlur?: React.FocusEventHandler; // default: null
// Only allow tags that are present in the autocomplete options.
restrictTagsToAutocompleteOptions?: boolean; // default: false
// A callback function to be called when a tag is clicked.
onTagClick?: (tag: { id: string; text: string }) => void; // default: null
// Enable drag and drop functionality.
draggable?: boolean; // default: false
// Position of the input field in relation to the tags.
inputFieldPosition?: 'bottom' | 'top' | 'inline'; // default: 'bottom'
// Show a button to clear all tags.
clearAll?: boolean; // default: false
// A callback function to be called when the clear all button is clicked.
onClearAll?: () => void; // default: null
// Additional props to be passed to the input field.
inputProps?: React.InputHTMLAttributes; // default: {}
// Use a popover to display tags instead of inline.
usePopoverForTags?: boolean; // default: false
// A callback function to generate an id for a newly created tag
generateTagId?: () => string; // default: utils/uuid
};
`$3
Define the delimiters that can be used to separate tags within the input.
typescript
enum Delimiter {
Comma = ',',
Enter = 'Enter',
}
``You can find out more about the API and implementation in the Documentation.