Tag Input
An inline chip/tag input for entering and managing free-form lists of string values. Tags are created by typing and pressing a configurable trigger key. Supports limits, suggestions, paste splitting, custom tag rendering, and EditForm integration.
Default
A basic
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.Tags: none
Variants
Three visual variants control the appearance of the tag chips:
Default (secondary badge style), Outline (bordered tags), and Secondary (muted background). Use the Variant parameter to set them.Default
blazor
dotnet
Outline
outline
style
Secondary
secondary
muted
With Limits
Use
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.With Suggestions
Provide a
Suggestions list for static autocomplete. Use arrow keys to navigate the dropdown or click to select. Matching items are filtered as you type.Clearable
Set
Clearable to true to show a clear-all button when tags are present. Clicking it removes all tags at once.blazor
dotnet
csharp
Disabled
Set
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.read-only
disabled
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.