Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
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.
Loading example…
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.
Loading example…
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.
Loading example…
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.
Loading example…
Clearable
Set
Clearable to true to show a clear-all button when tags are present. Clicking it removes all tags at once.
Loading example…
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.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.