Docs
API Reference

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


PropDefaultTypeDescriptionRequired
placeholder""stringPlaceholder text for the input when no tags are present.No
tags[]Tag[]An array of tag objects that are displayed as pre-selected.Yes
setTagsFunctionReact.DispatchFunction to update the state of the tags.Yes
maxTagsnullnumberSets a limit on the number of tags a user can add.No
minTagsnullnumberSets a minimum number of tags a user must add.No
readOnlyfalsebooleanPrevents the user from modifying the tags.No
disabledfalsebooleanDisables the tag input.No
allowDuplicatesfalsebooleanAllows the user to add duplicate tags.No
maxLengthnullnumberSets a maximum character limit for each tag.No
minLengthnullnumberSets a minimum character limit for each tag.No
styleClassesObject

Custom classes to style the tag input and its subcomponents. See the Styling section of the docs for more information.

No
inlineTagstrueboolean

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","stringCharacter used to separate tags when pasting multiple tags.No
showCounterfalsebooleanDisplays a counter showing the number of tags added.No
placeholderWhenFull""stringPlaceholder text displayed when the maximum number of tags is reached.No
sortTagsfalsebooleanSorts the tags alphabetically.No
activeTagIndexnullnumber | null

Sets the index of the tag that is currently active. This is useful when using keyboard navigation.

Yes
setActiveTagIndexFunctionnumber | null

Function to update the active tag index. This is useful when using keyboard navigation.

Yes
truncatefalsebooleanTruncates 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
addTagsOnBlurfalsebooleanAdds tags when the input field loses focus.No
draggablefalsebooleanAllows 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
clearAllfalsebooleanDisplays a "Clear All" button to remove all tags.No
usePopoverForTagsfalsebooleanDisplays tags in a popover when they exceed the available space.No

Autocomplete Properties


PropDefaultTypeDescriptionRequired
enableAutocompletefalsebooleanEnables the autocomplete feature.No
autocompleteOptions[]string[]Defines the options available for autocomplete.No
restrictTagsToAutocompleteOptionsfalseboolean

Restricts the user to selecting tags only from the autocomplete options.

No
autocompleteFilternullFunctionFilters the autocomplete options based on the user input.No
autocompleteFilternullFunctionFilters the autocomplete options based on the user input.No

Input Properties


PropDefaultTypeDescriptionRequired
inputPropsObjectInputHTMLAttributesAdditional props to pass to the input field.No

Events


PropDefaultTypeDescriptionRequired
onTagAddnullFunctionCallback function that triggers when a new tag is added.No
onTagRemovenullFunctionCallback function that triggers when a tag is removed.No
onInputChangenullFunction

Callback function that triggers on every keystroke within the input field.

No
onFocusnullFunctionCallback function that triggers when the input field is focused.No
onBlurnullFunctionCallback function that triggers when the input field loses focus.No
onTagClicknullFunctionCallback function that triggers when a tag is clicked.No
onClearAllnullFunction

Callback function that triggers when the "Clear All" button is clicked.

No

Methods


MethodDefaultTypeDescriptionRequired
validateTagnullFunctionCallback function that validates the tag before adding it.No
customTagRenderernullFunctionCustomizes the rendering of tags.No
generateTagIdnullFunctionGenerates an id for a newly created tag.No