Input · TagInput
TagInput
Taginput is a input component that can add content as a tag.

Demos

How to import

Basic Usage

After pressing the Enter key, the input will add value as a tag. If the tag content is an empty string or pure space, it will be filtered.

Batch Add

You can use separator to set the separator to achieve batch input, and its default value is a comma. After version 1.29.0, multiple separators are supported in string[] format.

Batch Remove

You can also use showClear to set whether to support one-click deletion of all tags and input.

Disabled

Size

Use size to set the size of the TagInput, optional: small, default, large.

Different validate status

validateStatus: default, warning, error.

Prefix / Suffix

You can pass the input box prefix through prefix, the input box suffix through suffix, for text or React Node.
The left and right padding is automatically brought when the content passed in by prefix and reactix is text or Icon. If it is a custom ReactNode, the left and right padding is 0.If necessary, you can set it in the ReactNode you passed in.

Allow Duplicates

You can use allowDuplicates to set whether to allow the creation of the same tag.

Autocomplete

You can use addOnBlur to set whether the current input value is automatically created as a tag when the blur event is triggered.

Limits

You can use max to limit the number of tags. The onExceed() callback will be invoked when the limit is exceeded.
You can use maxLength to limit the maximum length of a single tag, and the onInputExceed() callback will be invoked when this value is exceeded.

Limit the number of tags displayed

You can use maxTagCount to limit the number of tags displayed, and the excess will be displayed as +N. You can use showRestTagsPopover to set whether hover +N displays Popover after maxTagCount is exceeded, and you can configure Popover in the restTagsPopoverProps property.

Controlled Tag

You can use value to set tags, and use onChange to achieve control of the tags.

Controlled Input

You can use inputValue to set input box, and use onInputChange to control the input content.

Callback

Focus Management

You can use the blur() and focus() methods to manage the focus.

Custom TagInput rendering

You can use renderTagItem to customize tag rendering.

Drag to sort

Set draggable to true to enable drag and drop sorting. Supported since v2.17.0. Adding the same Tag is not allowed under drag and drop sorting, so you need to set allowDuplicates to false. After the drag function is enabled, click TagInput, and the Tag can be dragged. Click anywhere outside the TagInput, the Tag cannot be dragged.

API Reference

PropertiesInstructionsTypeDefaultVersion
addOnBlurWhether to automatically create the current input value into a tag when the blur event is triggeredbooleanfalse1.20.0
allowDuplicatesAllows adding the same tag multiple timesbooleantrue1.20.0
autoFocusSet whether to automatically focus during initial renderingbooleanfalse1.29.0
classNameClass namestring-1.19.0
defaultValueDefault tag valuestring[]-1.19.0
disabledRead-only, disable interactionbooleanfalse1.19.0
inputValueControlled input valuestring-1.19.0
maxLengthMaximum length of a tagnumber-1.19.0
maxMaximum number of tags allowednumber-1.21.0
maxTagCountThe maximum number of tags to be displayed, if exceeded, they will be displayed in the form of +Nnumber-1.21.0
showRestTagsPopoverWhen maxTagCount is exceeded and hover reaches +N, whether to display the remaining content through Popoverbooleantrue1.21.0
restTagsPopoverPropsThe configuration properties of the popoverPopoverProps{}1.21.0
showContentTooltipWhen the tag is too long and truncated, when hovering the tag, whether to display all contents through Tooltipbooleantrue1.21.0
placeholderContent to be appear by defaultstring-1.19.0
prefixPrefixReactNode-1.19.0
preventScrollIndicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the userboolean
renderTagItemCustomize the rendering of items(value: string, index: number) => React.ReactNode-1.19.0
separatorCustomize the separatorstring|string[],1.19.0,string[] is supported since 1.29.0
showClearWhether to show the clear buttonbooleanfalse1.19.0
sizeSize, one of smalllargedefaultstringdefault1.19.0
styleInline styleReact.CSSProperties-1.19.0
suffixSuffixReactNode-1.19.0
validateStatusValidate status for styling only, one of defaultwarningerrorstringdefault1.19.0
valueControlled tag valuestring[] | undefined-1.19.0
draggableSet whether to drag and dropbooleanfalse2.17.0
expandRestTagsOnClickWithout dragging,whether to expand redundant tags after TagInput is clickedbooleantrue2.17.0
onAddCallback invoked when tags are added(addedValue: string[]) => void-1.19.0
onBlurCallback invoked when input loses focus(e:React.MouseEvent) => void-1.19.0
onChangeCallback invoked when tags changes(value:string[]) => void-1.19.0
onExceedCallback invoked when max is exceeded(value:string[]) => void-1.19.0
onFocusCallback invoked when input gets focus(e:React.MouseEvent) => void-1.19.0
onInputChangeCallback invoked when input changes(value:string,e: React.KeyboardEvent) => void)-1.19.0
onInputExceedCallback invoked when maxLength is exceeded(value:string) => void-1.19.0
onKeyDownCallback invoked when keydown(e: React.KeyboardEvent) => void-2.1.0
onRemoveCallback invoked when tags are removed(removedValue: string, idx: number) => void-1.19.0

Methods

NameDescriptionVersion
blur()Remove focus1.19.0
focus()Get focus1.19.0

Accessibility

ARIA

  • TagInput supports the input of aria-label to indicate the function of the TagInput;
  • TagInput will set aria-disabled and aria-invalid according to disabled and validateStatus props;
  • Both the input box and the clear button of TagInput have aria-label to indicate the function of the element.

Design Tokens

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED