Tag Input

Overview

TagInput renders the headless NaviusTagInput with a pill/chip skin. Controlled/ uncontrolled is owned here the ZitsCalendar way: an internal tag-list mirror seeded from DefaultValue, only adopting Value when the consumer supplies it. The chips are looped by the wrapper (the primitive has no auto-chips part); each renders the primitive’s own NaviusTag/NaviusTagRemove so removal and highlight behavior run through the primitive unchanged.

Install

navius add tag-input --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsTagInput @bind-Value="_tags" Placeholder="Add a tag" />

@code {
    private IList<string> _tags = new List<string> { "blazor", "dotnet", "ui" };
}

Parts and props

Delimiters, AllowDuplicates, MaxTags, Validate, Transform, AddOnBlur, Disabled, OnAdd, OnRemove, and OnInvalid are the primitive’s own props and pass through unchanged. The styled wrapper adds:

Prop	Type	Default	Description
Value / ValueChanged	IList<string>?	null	Controlled tag list. Bind with @bind-Value.
DefaultValue	IList<string>?	null	Uncontrolled initial tags.
Placeholder	string?	null	Placeholder for the trailing text field.

Styling surface

Attributes on ZitsTagInput merges with the root base class via Cn.Merge and forwards to NaviusTagInput. Chip, remove-button, and field classes are fixed (not overridable per instance).

Data attribute hooks

Part	Attribute	Description
Root	data-disabled	Present when Disabled is true, emitted by the composed primitive; drives the disabled opacity/cursor styling.
Chip	data-highlighted	Present on the keyboard-highlighted chip, emitted by the composed primitive; drives the focus-ring styling.

Underlying primitives

• NaviusTagInput