API Reference

Docs

API Reference

Detailed documentation of all the properties, types, and options available in the Emblor tag input component.

Demos

Autocomplete

Enable or disable the autocomplete feature for the tag input.

SportsProgrammingTravel

Include Tags In Input

Allows users to display tags inside the input field for a more compact and inline appearance.

SportsProgrammingTravel

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.

SportsProgrammingTravel

3/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.

Add on paste

When true, allow adding tags on paste. This works for a list of tags separated by a delimiter.

SportsProgrammingTravel

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.

SportsProgrammingTravel

Add tags on blur

Add tags when the input field loses focus.

SportsProgrammingTravel

Input field position

Changes the position of the input field in relation to the tags. _ This only works when inlineTags is set to false and the tags are rendered as a separate list above/below the input field. _

SportsProgrammingTravel

Tag direction

Changes the layout of the tag list either as a row or as a column. _ This only works when inlineTags is set to false and the tags are rendered as a separate list above/below the input field. _

SportsProgrammingTravel

API Reference

General Properties

Prop	Default	Type	Description	Required
placeholder	""	string	Placeholder text for the input when no tags are present.	No
tags	[]	Tag[]	An array of tag objects that are displayed as pre-selected.	Yes
setTags	Function	React.Dispatch	Function to update the state of the tags.	Yes
maxTags	null	number	Sets a limit on the number of tags a user can add.	No
minTags	null	number	Sets a minimum number of tags a user must add.	No
readOnly	false	boolean	Prevents the user from modifying the tags.	No
disabled	false	boolean	Disables the tag input.	No
allowDuplicates	false	boolean	Allows the user to add duplicate tags.	No
maxLength	null	number	Sets a maximum character limit for each tag.	No
minLength	null	number	Sets a minimum character limit for each tag.	No
styleClasses		Object	Custom classes to style the tag input and its subcomponents. See the Styling section of the docs for more information.	No
inlineTags	true	boolean	Toggles between rendering the tags inline (in the input field) or in a tag list above the input when the user enters a tag.	No
delimiterList	[]	string[]	An array of characters that can be used as delimiters to separate tags.	No
delimiter	","	string	Character used to separate tags when pasting multiple tags.	No
showCounter	false	boolean	Displays a counter showing the number of tags added.	No
placeholderWhenFull	""	string	Placeholder text displayed when the maximum number of tags is reached.	No
sortTags	false	boolean	Sorts the tags alphabetically.	No
activeTagIndex	null	number \| null	Sets the index of the tag that is currently active. This is useful when using keyboard navigation.	Yes
setActiveTagIndex	Function	number \| null	Function to update the active tag index. This is useful when using keyboard navigation.	Yes
truncate	false	boolean	Truncates tags that exceed the maximum character limit.	No
direction	"row"	"row" \| "column"	Changes the layout of the tag list either as a row or as a column. This only works when inlineTags is set to false and the tags are rendered as a separate list above/below the input field.	No
addTagsOnBlur	false	boolean	Adds tags when the input field loses focus.	No
draggable	false	boolean	Allows the user to drag and reorder tags.	No
inputFieldPosition	"bottom"	"top" \| "bottom"	Sets the position of the input field. This only works when inlineTags is set to false and the tags are rendered as a separate list above/below the input field.	No
clearAll	false	boolean	Displays a "Clear All" button to remove all tags.	No
usePopoverForTags	false	boolean	Displays tags in a popover when they exceed the available space.	No

Autocomplete Properties

Prop	Default	Type	Description	Required
enableAutocomplete	false	boolean	Enables the autocomplete feature.	No
autocompleteOptions	[]	string[]	Defines the options available for autocomplete.	No
restrictTagsToAutocompleteOptions	false	boolean	Restricts the user to selecting tags only from the autocomplete options.	No
autocompleteFilter	null	Function	Filters the autocomplete options based on the user input.	No
autocompleteFilter	null	Function	Filters the autocomplete options based on the user input.	No

Input Properties

Prop	Default	Type	Description	Required
inputProps	Object	InputHTMLAttributes	Additional props to pass to the input field.	No

Events

Prop	Default	Type	Description	Required
onTagAdd	null	Function	Callback function that triggers when a new tag is added.	No
onTagRemove	null	Function	Callback function that triggers when a tag is removed.	No
onInputChange	null	Function	Callback function that triggers on every keystroke within the input field.	No
onFocus	null	Function	Callback function that triggers when the input field is focused.	No
onBlur	null	Function	Callback function that triggers when the input field loses focus.	No
onTagClick	null	Function	Callback function that triggers when a tag is clicked.	No
onClearAll	null	Function	Callback function that triggers when the "Clear All" button is clicked.	No

Methods

Method	Default	Type	Description	Required
validateTag	null	Function	Callback function that validates the tag before adding it.	No
customTagRenderer	null	Function	Customizes the rendering of tags.	No
generateTagId	null	Function	Generates an id for a newly created tag.	No