Tag Input

Overview

Tag Input materializes free text into removable chips: Delimiters (Enter and Comma by default) commit the current field text as a chip, and a typed or pasted comma/space splits and commits too. The commit pipeline runs on the Root — Transform normalizes, then duplicate checking, MaxTags, and Validate gate it, with a blocked add raising OnInvalid. Chip navigation uses a single roving tab stop: Backspace on an empty field highlights then removes the last chip, and ArrowLeft enters chip navigation.

Anatomy

@using Navius.Primitives.Components.TagInput

<NaviusTagInput @bind-Value="_tags">
    <NaviusTagInputList>
        @foreach (var tag in _tags)
        {
            <NaviusTag @key="tag" Value="@tag">
                @tag
                <NaviusTagRemove />
            </NaviusTag>
        }
    </NaviusTagInputList>
    <NaviusTagInputField />
</NaviusTagInput>

Root

Prop	Type	Default	Description
`Value`	`IList<string>?`	-	Controlled tag list. Pair with `ValueChanged` (`@bind-Value`).
`ValueChanged`	`EventCallback<IList<string>>`	-	Fires when the controlled `Value` should change.
`DefaultValue`	`IList<string>?`	-	Initial tags when uncontrolled.
`Delimiters`	`IReadOnlyList<TagDelimiter>?`	Enter, Comma	Which keys/characters commit a chip. `TagDelimiter` is `Enter` / `Comma` / `Tab` / `Space`.
`AllowDuplicates`	`bool`	`false`	-
`MaxTags`	`int?`	-	-
`Validate`	`Func<string, bool>?`	-	Rejects a candidate tag (returning `false` blocks it and raises `OnInvalid`).
`Transform`	`Func<string, string>?`	-	Normalizes a candidate before commit, applied after a trim.
`AddOnBlur`	`bool`	`false`	Commits the field text on blur.
`Disabled`	`bool`	`false`	-
`OnAdd`	`EventCallback<string>`	-	-
`OnRemove`	`EventCallback<string>`	-	-
`OnInvalid`	`EventCallback<string>`	-	-
`ChildContent`	`RenderFragment?`	-	The tag input’s parts.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `div`.

List

Prop	Type	Default	Description
`ChildContent`	`RenderFragment?`	-	The chips.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `div`.

Tag

Prop	Type	Default	Description
`Value`	`string`	`""`	The chip’s value (the tag string).
`Index`	`int`	`-1`	The chip’s position; when unset it is resolved from the value.
`ChildContent`	`RenderFragment?`	-	Chip content.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `span`.

TagRemove

Prop	Type	Default	Description
`ChildContent`	`RenderFragment?`	-	Button content.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `button` (auto `aria-label="Remove {value}"` unless overridden).

Field

Prop	Type	Default	Description
`Placeholder`	`string?`	-	-
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `input`.

Data attributes

Part	Attribute	Description
Root	`data-navius-tag-input`	Present on the wrapper.
Root	`data-disabled`	Present when disabled.
Root	`data-empty`	Present when there are no tags.
List	`data-navius-tag-input-list`	Present on the chip container.
Tag	`data-navius-tag`	Present on each chip.
Tag	`data-highlighted`	Present on the chip-navigation highlight (the roving tab stop).
TagRemove	`data-navius-tag-remove`	Present on the remove button.
Field	`data-navius-tag-input-field`	Present on the input.

Keyboard interactions

Key	Behavior
`Enter` / `,` (comma)	Commits the current field text as a chip (the default delimiters).
`Backspace` (empty field)	Highlights the last chip, then removes it on the next press.
`ArrowLeft` (empty field)	Enters chip navigation, highlighting the last chip.
`ArrowLeft` / `ArrowRight` (on a chip)	Moves the highlight between chips (`ArrowRight` past the last returns to the field).
`Home` / `End` (on a chip)	Highlights the first / last chip.
`Delete` / `Backspace` (on a chip)	Removes the highlighted chip.

ARIA mechanism

Chips carry a roving tabindex: only the highlighted chip is tabbable. Each TagRemove button labels itself “Remove {value}” unless overridden. Pair the Field with a Label for an accessible name. Covered by the Playwright browser test suite.