Tag Input
An inline chip/tag input for entering and managing free-form lists of string values. Tags are created by typing and then firing a configurable trigger: a key, or Blur, which commits the typed text when the user leaves the input. Supports limits, suggestions, paste splitting, custom tag rendering, and EditForm integration.
Default
BbTagInput with two-way binding via @bind-Tags. Press Enter or , to create a tag. Press Backspace on an empty input to remove the last tag.Variants
Variant parameter. Default uses secondary badges on the standard input background, Outline uses bordered badges on the same background, and Secondary keeps the default badges but gives the tag container a muted background. A TagTemplate replaces the badge entirely, so Variant has no effect alongside one.With Limits
MaxTags to cap the total number of tags and MaxTagLength to limit the character length of each tag. When a limit is exceeded, the tag is rejected and OnTagRejected fires. Combine multiple trigger keys using the AddTrigger flags enum.Commit on Blur
TagInputTrigger.Blur is the one trigger that is not a key: leaving the input commits whatever was typed, so a half-finished entry is not lost when the user clicks or tabs away.
It commits the typed text, not a highlighted suggestion — clicking a suggestion adds that suggestion and cancels the blur, and returning focus to the input cancels it too, so nothing is added twice.
Rejected text stays in the input and raises OnTagRejected, exactly as with a key trigger. Type a name below, then click outside the field.
With Suggestions
Suggestions list for static autocomplete. Matching items are filtered as you type. Use the arrow keys to navigate the dropdown, or click an item. While a suggestion is highlighted, any key in AddTrigger adds that suggestion instead of the typed text. For server-side lookups use OnSearchSuggestions with SuggestionDebounceMs.Clearable
Clearable to true to show a clear-all button when tags are present. Clicking it removes all tags at once.Custom Tag Template
TagTemplate renders each tag yourself. It replaces the whole default badge, including its per-tag remove button, so Variant no longer affects the tag and the only ways to remove one are Backspace on an empty input or the clear-all button. Set Clearable when you use a template, or add your own remove control inside it.
Disabled
Disabled to true to make the entire tag input non-interactive. Existing tags are displayed but cannot be removed, and no new tags can be added.Behaviour
Paste. Pasting text that contains a configured delimiter (comma, semicolon or space) splits it into several tags at once.
Backspace on an empty input removes the last tag. Duplicates are rejected case-insensitively unless AllowDuplicates is set.
Rejection. OnTagRejected fires for every reason a tag is refused: a duplicate, MaxTags, MaxTagLength, or Validate returning false.
The rejected text stays in the input so the user can correct it. Nothing is silently dropped.
Input method editors. While an IME is composing — Korean, Japanese or Chinese — trigger keys, Enter, the arrow keys and Escape are left to the IME and input updates are held back, so a half-composed word is never committed as a tag. The input is sent once composition ends.
EditForm. Inside an EditForm the component participates in validation through the cascaded EditContext.
@bind-Tags supplies TagsExpression for you, so do not also set it explicitly.
Public Methods
Use a component reference (@ref) to call this method programmatically.
| Method | Returns | Description |
|---|---|---|
| FocusAsync() | ValueTask | Moves keyboard focus to the underlying text entry input. Call via @ref — no JS interop needed. |
The component also exposes a public Element property of type ElementReference that points at the underlying text entry input element, for advanced JS interop scenarios.