Shadcn Tag Input

An implementation of a Tag Input component built on top of Shadcn UI's input component.

These are the topics that you're interested in.

Setup

Install Shadcn via CLI

Run the shadcn-ui init command to setup your project:

npx shadcn-ui@latest init

Install the necessary Shadcn components:

Run the shadcn-ui add command to add the necessary shadcn components to your project:

npx shadcn-ui@latest add input
npx shadcn-ui@latest add button
npx shadcn-ui@latest add command
npx shadcn-ui@latest add toast
npx shadcn-ui@latest add popover

Install the necessary dependencies:

Run the following command to install the necessary dependencies for the tag input component:

pnpm i uuid react-easy-sort

To use the tag input component:

Snippets

Variants

Variant

Choose from different visual styles like default, primary, and destructive.

SportsTravelProgramming

Size

Adjust the size of the tags.

SportsTravelProgramming

Shape

Customize the shape of the tags.

SportsTravelProgramming

Border styles

Choose between different border styles or opt for no border at all.

SportsTravelProgramming

Text case

Control the text casing within the tags.

SportsTravelProgramming

Interaction

Define the interaction style of the tags. Make them clickable or non-clickable.

SportsTravelProgramming

Animations

Add animations on render for tags.

SportsTravelProgramming

Text styles

Customize the text style within the tags.

SportsTravelProgramming

Props

Autocomplete

Enable or disable the autocomplete feature for the tag input.

Custom tag render

Replace the standard tag appearance with your own custom-designed tags.

Sports
Programming
Travel

Max tags

Set the maximum number of tags that can be added.

0/5

Draggable

Allow tags to be dragged and dropped to reorder them.

Sports
Programming
Travel

Tag Popover

Allows users to view all entered tags in a popover overlay, offering easier management of tags.

Truncate

Prevent tags from overflowing the tag input by specifying the maximum number of characters to display.

Spor...Prog...Trav...

Clear all tags

Clear all tags from the tag input.

SportsProgrammingTravel

Allow duplicate tags

Allow duplicate tags to be added to the tag input.

Input field position

Change the position of the input field to be inline or stacked in relation to the tags.

SportsProgrammingTravel

Tag direction

Change the direction of the tag layout from row to column.

SportsProgrammingTravel

Options

OptionTypeDefaultDescription
placeholderstring""Placeholder text for the input.
tagsArray<{ id: string, text: string }>[]An array of tags that are displayed as pre-selected.
setTagsReact.Dispatch<React.SetStateAction<{ id: string, text: string }[]>>[]Function to set the state of tags.
enableAutocompletebooleanfalseEnable autocomplete feature. Must be used with autocompleteOptions.
autocompleteOptionsArray<{ id: string, text: string }>[]List of options for autocomplete. Must be used with enableAutocomplete.
maxTagsnumbernullMaximum number of tags allowed.
minTagsnumbernullMinimum number of tags required.
readOnlybooleanfalseMake the input read-only.
disabledbooleanfalseDisable the input.
onTagAddFunctionnullCallback function when a tag is added.
onTagRemoveFunctionnullCallback function when a tag is removed.
allowDuplicatesbooleanfalseAllow duplicate tags.
maxLengthnumbernullMaximum length of a tag.
minLengthnumbernullMaximum length of tag.
validateTagFunctionnullFunction to validate a tag.
delimiterDelimiternullCharacter used to separate tags.
showCountbooleanfalseShow the count of tags.
placeholderWhenFullstring""Placeholder text when tag limit is reached.
sortTagsbooleanfalseSort tags alphabetically.
delimiterListArray[]List of characters that can be used as delimiters.
truncatenumbernullTruncate tag text to a certain length.
autocompleteFilterFunctionnullFunction to filter autocomplete options.
directionstringrowLayout direction of the tag inputs.
onInputChangeFunctionnullA callback function that is called whenever the input value changes.
customTagRendererFunctionnullA callback function that is used to render custom tag elements. This function receives a tag object as an argument and should return a React element representing the custom-rendered tag.
onFocusFunctionnullFunction to be called when the input field gains focus.
onBlurFunctionnullFunction to be called when the input field loses focus.
onTagClickFunctionnullA callback function to be called when a tag is clicked
draggablebooleanfalseEnable drag and drop functionality.
inputFieldPositionstringbottomPosition of the input field in relation to the tags
clearAllbooleanfalseShow a button to clear all tags.
onClearAllFunctionnullA callback function to be called when the clear all button is clicked.
inputPropsObject{}Additional props to be passed to the input field (for example autocomplete, disabled etc).
usePopoverForTagsbooleanfalseUse a popover to display tags instead of inline.