- ReactTags__tags
- ReactTags__tagInput
- ReactTags__tagInputField
- ReactTags__selected
- ReactTags__selected ReactTags__tag
- ReactTags__selected ReactTags__remove
- ReactTags__suggestions
- ReactTags__activeSuggestion
- ReactTags__editTagInput
- ReactTags__editTagInputField
- ReactTags__clearAll

An example can be found in /example/reactTags.css.

If you need to set your own class names on the component, you may pass in
a classNames prop.

`js
classNames={{
tags: 'tagsClass',
tagInput: 'tagInputClass',
tagInputField: 'tagInputFieldClass',
selected: 'selectedClass',
tag: 'tagClass',
remove: 'removeClass',
suggestions: 'suggestionsClass',
activeSuggestion: 'activeSuggestionClass',
editTagInput: 'editTagInputClass',
editTagInputField: 'editTagInputField',
clearAll: 'clearAllClass',
}}
...>
`


Preparing for Migration to v7.x.x

Below are the list of deprecated props so please stop using it and migrate to the new props as these will be removed in v7.x.x.
You will see a warning for the migration as well in the console.

- delimiters - Please use separators instead, more info in this issue.
- inline - Please use inputFieldPosition instead.
- autofocus - Please use autoFocus instead.

Additionally the prop autocomplete is deprecated and will be removed in v7.x.x. If you have any concerns regarding this, please share your thoughts in this issue.

Support

Install yarn
`
npm install -g yarn
`

`
git clone git@github.com:react-tags/react-tags.git
cd react-tags
yarn
yarn precommit
yarn start
`
open http://localhost:8090

Contributing

`js
// With default labelField
const tags = [ { id: "1", text: "Apples" } ]

// With labelField of name
const tags = [ { id: "1", name: "Apples" } ]

// With className
const tags = [ { id: "1", text: "Apples", className: 'red'} ]
`


$3

`js
// With labelField of name
const suggestions = [
{ id: "1", name: "mango" },
{ id: "2", name: "pineapple"},
{ id: "3", name: "orange" },
{ id: "4", name: "pear" }
];

`

$3


`js
import { WithContext as ReactTags, KEYS } from 'react-tag-input';

delimiters={[KEYS.TAB, KEYS.SPACE, KEYS.COMMA]}
/>
`

$3

- Enter
- Tab
- Space
- Comma
- Semicolon

And we export the constant SEPERATORS for convenience.


`js
import { WithContext as ReactTags, SEPARATORS } from 'react-tag-input';
separators={[SEPARATORS.TAB, SEPARATORS.SPACE, SEPARATORS.COMMA]}
/>
`

$3

`js
let placeholder = "Add new country"
`


$3

`jsx
tags={tags}
suggestions={}
labelField={'name'}
handleDrag={}
/>
`

This is useful if your data uses the text property for something else.

$3

`js
function(tag) {
// add the tag to the tag list
}
`


$3

`js
function(i) {
// delete the tag at index i
}
`


$3

`js
function(tag, currPos, newPos) {
// remove tag from currPos and add in newPos
}
`

$3

For example, if you prefer to override the default filter behavior and instead match any suggestions that contain
the entered text _anywhere_ in the suggestion, your handleFilterSuggestions property may look like this:

`js
function(textInputValue, possibleSuggestionsArray) {
var lowerCaseQuery = textInputValue.toLowerCase()

return possibleSuggestionsArray.filter(function(suggestion) {
return suggestion.toLowerCase().includes(lowerCaseQuery)
})
}
`

Note: The above custom filter uses String.prototype.includes, which was added to JavaScript as part of the ECMAScript 7
specification. If you need to support a browser that does not yet include support for this method, you will need to
either refactor the above filter based on the capabilities of your supported browsers, or import a [polyfill for
String.prototype.includes][includes-polyfill].

$3

`js
function(i) {
// use the tag details at index i
}
`

$3

`jsx
autofocus={false}
...>
`

$3

`jsx
autoFocus={false}
...>
`

$3

However when input field position is inline, you will be able to delete the tags by pressing Backspace irrespective of the value of this prop.

This prop will likely be removed in future versions.

`js
allowDeleteFromEmptyInput={true}
...>
`


$3

`js
(value, event) => void
`
The value denotes the target input value to be added and the event is the original event for onChange.

`js
handleInputChange={this.handleInputChange}
...>
`

$3

`js
handleInputFocus={this.handleInputFocus}
...>
`

Signature

`js
(value, event) => void
`
The value denotes the target input value to be added and the event is the original event for onFocus.

$3

`js
(value, event) => void
`
The value denotes the target input value to be added and the event is the original event for onBlur.

`js
handleInputBlur={this.handleInputBlur}
...>
`

$3

)
}
}

| Name | Type | Description |
| --- | --- | --- |
| className | string | The prop classNames.remove passed to the ReactTags component gets forwarded to the remove component. Defaults to ReactTags__remove |
| onRemove | Function | The callback to be triggered when tag is removed, you will need to pass this to the onClick handler of the remove component |
|onKeyDown | Function | The callback to be triggered when keydown event occurs. You will need to pass this to onKeyDown handler of the remove component|
| aria-label | string | The aria-label to be announced when the tag at an index is deleted |
| tag |

{ id?: string, className: string, key: string }

- true - when separator key (such as enter) is pressed, first matching suggestion is used.
- 1 - when separator key (such as enter) is pressed, matching suggestion is used only if there is a single matching suggestion
- false (default) - tags are not autocompleted on enter/separator key press.

This option has no effect if there are no suggestions.

$3

`
name = "inputName"
...>
`


$3

`
id = "inputId"
...>
`

$3

`
maxLength = "42"
...>
`

$3

`
inline
...>
`

!img

`
inline={false}
...>
`

!img

_This attribute is deprecated and will be removed in v7.x.x, see inputFieldPosition._

$3

`
inputFieldPosition="inline"
...>
`

!img

`
inputFieldPosition="top"
...>
`

!img

`
inputFieldPosition="bottom"
...>
`

!img

$3

`
renderSuggestion = {({ text }, query) =>

`js
inputProps = {{
disabled: true,
autocomplete: "off"
}}
/>
`

$3

This prop implies whether to allow paste action for adding tags. Defaults to true.

$3

This prop implies whether the tags should be editable. Defaults to false.

$3

`js
onTagUpdate(editIndex, tag) => void;
`
This callback is if present is triggered when tag is updated. The edit index and the tag are passed in the callback. You can update the tags prop in this callback.

$3

This props implies whether 'clear all' button should be shown. Defaults to false.

$3

An object containing custom ARIA attributes to enhance screen reader support and improve accessibility.
It accepts the below attributes
``js
{
clearAllLabel?: string // Optional accessible label for a "clear all tags" button improving accessibility by providing a clear, descriptive action label.
}