Tag picker

Whether the Pill should apply aria-hidden={true} to hide the element from screen readers. This should only be done if some other element is responsible for reading the contents of the Pill.

Optional aria label to pass to the pill. Will default to the this.props.children if this.props.children is a string.

Optional className to emit on the root element

Background color for the pill Ignored unless variant is set to Colored If variant is set to Colored and this is not provided, we'll render as Standard and emit a warning to the console

Optional boolean to set if the pill is displaying a count of something

Content to show in the pill when selected.

Optional className to emit on the content

The element has been exluded from a current focusZone by default.

The element should not be tabable but still should be able to receieve focus.

Props used to render the pill icon If a filled visual is provided as well, we only render the visual and will emit a warning to the console Using with Size = PillSize.Compact will result in no icon being rendered and a warning being printed to the console

Id for the root element

Callback to handle blur events

onClick handler for the pill itself

onFocus handler for the pill itself

onMouseEnter for root element

onMouseLeave for root element

Renders the remove button if provided Handler to remove the pill

Custom rendering function for left-aligned visuals Using with size = PillSize.Compact will trigger a warning in the console and will not render anything

Explicit tab index overrides any other focus-zone / focus-group controlled indexing for the remove button

Use of iconProps, onRemoveClick, or onRenderFilledVisual in conjunction with Compact will result in those elements not being rendered and a warning being printed to the console

Explicit tab index overrides any other focus-zone / focus-group controlled indexing

If this is set to Colored and color is not provided, we'll render as Standard and emit a warning to the console

Callback to determine if two tags are identical.

Aria label

Id of another element which labels this one for screen reader users. Defaults to FormItem's label if this TagPicker is used within.

css class added to the tag picker.

Callback which converts one of the tag items to a pill.

Callback to create a default item from a search string.

String used to break apart a search string. If this is set, you should also define onDelimitedSearch to handle input where the user has pasted in several items delimited

Text to show when the search does not show any suggestions

Callback when focus has left the TagPicker. @param text text value of the tag pick before focusing away

Callback when the user has typed or pasted a string with the deliminator. The callback returns the equivalent of searchString.split(this.props.deliminator)

Callback when the user clicks or focuses on an empty text field. This can be used to show an MRU list

Callback when focus has entered the TagPicker input field.

Callback when the text value of the input tag has changed. This callback should change the suggestions and suggestionsLoading values appropriately.

Number in milliseconds that determines how long to debounce the supplied onSearchChanged or onDelimitedSearch function for.

Callback for when the right arrow key is pressed inside the tag picker.

Callback when a tag is chosen. Unless the tag is not valid, the consumer should update the suggestions list.

Callback when a tag is removed. Unless the tag is not valid, the consumer should update the suggestions list.

Callback when a group of tags is removed. Unless the tag is not valid, the consumer should update the suggestions list. If this is not specified, then the user cannot select multiple tags for deletion.

Placeholder text to show when the input has no text and there are no selected tags

Icon props to show at the beginning of the picker control when there is nothing selected

Callback to render the suggestion row for a given suggestion.

List of tags currently selected by the user. This prop is 100% controlled by the consumer. onTagAdded/onTagRemoved/onTagsRemoved must also be implemented in order to work properly. If this value is a an item, the prop must be updated to cause the Tag Picker to re-render. If this value is an ObservableValue, then changing its value will cause the Tag Picker to re-render.

Function to determine if blur should clear the textfield and close the suggestions list

List of suggestions for the given search value. This prop is 100% controlled by the consumer. onSearchChanged must also be implemented in order to work properly. If this value is a an item, the prop must be updated to cause the Tag Picker to re-render. If this value is an ObservableValue, then changing its value will cause the Tag Picker to re-render.

Aria label of the suggestions container

boolean indicating if the control is waiting to generate its suggestions list. This prop is 100% controlled by the consumer. onSearchChanged must also be implemented in order to work properly. If this value is a an T, the prop must be updated to cause the Tag Picker to re-render. If this value is an ObservableValue, then changing its value will cause the Tag Picker

String to show when results are loading