The TagBox is an editor that allows users to select multiple items (tags) from a predefined drop-down list. Users can also type in the edit box to filter list items that contain the search string.

The main TagBox API members are listed below:

• Data — Specifies the data source that populates the editor's list items.
• TextFieldName — Specifies the data source's field that supplies text for items.
• Tags — Specifies the editor's tags.
• TagsChanged — Fires when the tag collection is changed.
• Values — Specifies the drop-down list's selected values.
• ValuesChanged — Fires when the selected value collection is changed.

The TagBox component supports different size modes. To specify the component's size in code, use the SizeMode property. To apply different size modes, use the drop-down list in the demo card's header.

The TagBox supports keyboard navigation (list of supported keyboard shortcuts), allowing users to navigate within the item list and select tags.

This demo illustrates how to bind the TagBox to a list of complex business objects.

Our Blazor TagBox allows you to introduce search and filter capabilities via the following API members:

• SearchMode — Specifies whether the component can search for text based on user input (within the edit box).
• SearchFilterCondition — Specifies the search and filter condition (Contains or StartsWith).
• SearchTextParseMode — Specifies how the component treats search words. If search text contains multiple words separated by space characters, words can be treated as a single condition or individual conditions. The following text parse modes are available: GroupWordsByAnd, GroupWordsByOr, and ExactMatch.

For additional information, refer to the following topic: Search and Filter Data.

Our Blazor TagBox can display data across multiple columns. To create columns, use DxListEditorColumn objects as needs dictate. Objects include the following column customization options:

• Caption — Specifies the column caption.
• FieldName — Specifies the data source field used to populate column items.
• SearchEnabled — Specifies whether the component can search text in cells associated with the current column.
• Visible — Specifies column visibility.
• VisibleChanged — Fires when column visibility changes.
• VisibleIndex — Specifies column display order.
• VisibleIndexChanged — Fires when the column's visible index changes.
• Width — Specifies column width.

To format an editor value, use the EditFormat property. This property allows you to format values displayed in both standard and multi-column TagBoxes. A {0} {1} format specifies that the editor value includes values for the following columns: FirstName (VisibleIndex = 0) and LastName (VisibleIndex = 1).

To help you deliver the best possible user experience, our Blazor TagBox allows you to organize dropdown list items into groups.

Use the GroupFieldName property to group data within our Blazor TagBox dropdown (Group field values appear as group headers in the dropdown).

Note the following when using this option:

• The TagBox supports a single group level.
• Users cannot collapse groups.
• Group headers are not used for search operations.
• Multi-column TagBox controls also support groups.
• You can use the GroupHeaderDisplayTemplate property to customize group headers.

Use the DisabledFieldName property to disable individual items within a TagBox dropdown list. The property specifies a Boolean field and stores each item's enabled or disabled state. Disabled items are grayed out and cannot be selected.

Note: Disabled items can improve overall usability but cannot replace appropriate security protocols (Users may still be able to select disabled items on the client side – as such, you should implement appropriate security-related checks in code).

Use the ListRenderMode property to specify how the TagBox renders the item list.

• Entire — The TagBox renders the entire item list. Use this option for small item lists where scrolling should work instantly.
• Virtual — The TagBox renders items only after they appear in the viewport. Use this option to improve performance when the list contains to many items to render simultaneously.

In this demo, the ListRenderMode property is set to ListRenderMode.Virtual.

The TagBox component provides access to item values. The value is assigned to the editor's edit value when a user selects an item from the drop-down list. To enable this access, set the ValueFieldName property to the name of the data source field that ships with values for the TagBox items.

If the ValueFieldName property is not specified, the TagBox component searches for a Value field in the data source and uses this field as a value field. Otherwise, values are not assigned to editor items.

To access values of the selected items, use the Values property. To track selection changes, use the ValuesChanged event or two-way synchronization as demonstrated in this module.

In this demo, the TagBox supports custom tags that are not stored in a bound data source (the AllowCustomTags property is set to true).

In this demo, the TagBox displays selected items in the drop-down list. Set the HideSelectedItems property to false to enable this behavior.

This demo illustrates how to use the NullText property to display placeholder text in the TagBox when its value is null.

Set the ClearButtonDisplayMode property to Auto to display the Clear button when the TagBox has a non-null value. Users can click this button to clear the editor's value (set it to null).

This demo uses the TagDisplayTemplate property to customize tag's appearance.

The template's Context parameter has the following properties:

• DataItem — The tag's bound data item (if the tag is not custom).
• IsCustom -Returns whether the current tag is custom (not stored in the assigned data source).
• RemoveTagAction — The predefined action that removes the tag.
• DisplayText — The tag's text.

Use the ItemDisplayTemplate property to customize the appearance of TagBox items. The property acceptsTagBoxItemDisplayTemplateContext object as its context parameter. You can use the parameter's members to obtain item information:

• DataItem
• DisplayText
• HighlightedDisplayText
• Value
• VisibleIndex

In this demo, the ItemDisplayTemplate property is used to display TagBox items in a card-like view. The TagDisplayTemplate property customizes the appearance of TagBox tags.

The ColumnCellDisplayTemplate property allows you to specify custom content and change the appearance of cells associated with TagBox columns. The property accepts TagBoxColumnCellDisplayTemplateContext object as its context parameter. You can use parameter members to obtain column information:

• Column
• DataItem
• DisplayText
• HighlightedDisplayText
• Value
• VisibleIndex

This demo customizes the appearance of different columns.

The DevExpress Blazor TagBox displays an “empty data area” in the following instances:

• The Data property is not set.
• The specified data source does not contain items.
• You use the DataAsync property or the CustomData property to bind the List Box to a data source. The component sends the first request to a remote data source and waits for an appropriate response.

Define the EmptyDataAreaTemplate to customize content displayed in this empty region. The template's context parameter includes the IsDataLoading property. This property allows you to determine whether TagBox is still loading data.

Use the DropDownWidthMode property to specify the width of a drop-down list.

• ContentOrEditorWidth (Default) — The list's width is equal to the width of the longest list item or the editor's width (whichever is larger).
• ContentWidth — The list's width is equal to the width of the longest list item.
• EditorWidth — The list's width is equal to the editor's width. List items are cut if they do not fit.

In this demo, ContentOrEditorWidth mode is used for both TagBox components. To change the width of their drop-down lists, use the Drop Down Width Mode option below.