TagsInput
Description
A form input that lets the user assemble a list of short string values ("tags" or "chips") by typing them in and confirming each with a delimiter key (default: Enter or ,). Tags can be removed with the backspace key when the entry field is empty, or by clicking the remove affordance on each tag.
Usage
API reference
public sealed class TagsInput : IComponent, IHasMarginPaddingA form input that lets the user assemble a list of short string values ("tags" or "chips") by typing them in and confirming each with a delimiter key (default: Enter or ,). Tags can be removed with the backspace key when the entry field is empty, or by clicking the small "×" affordance next to each tag.
Remarks
TagsInput is the canonical primitive for free-form multi-value fields such as "categories", "recipients", "labels" or "keywords". When the values must come from a fixed set, prefer the existing Picker{T} component instead. The current list is available synchronously via Tags, and via a reactive IObservable{T} through AsObservable for binding into other components.
- Namespace
- Tesserae
- Implements
- IComponent, IHasMarginPadding
Constructors
| Name | Description |
|---|---|
| TagsInput | Creates a new, empty tags input. |
| Overload | |
|---|---|
| TagsInput() | Creates a new, empty tags input. |
| TagsInput(string[]) | Creates a tags input pre-populated with the given initial tags. |
Properties
| Name | Description |
|---|---|
| Tags | Gets the current list of tags in insertion order. |
| Placeholder | Gets or sets the placeholder shown in the inline entry field. |
| AllowDuplicates | Gets or sets whether the same tag value can appear more than once. Defaults to false. |
| MaxTags | Gets or sets the maximum number of tags accepted. Defaults to no limit. |
| Margin | Gets or sets the outer container's CSS margin. |
| Padding | Gets or sets the outer container's CSS padding. |
public IReadOnlyList<string> TagsGets the current list of tags in insertion order.
public string Placeholder { get ; set ; }Gets or sets the placeholder shown in the inline entry field.
public bool AllowDuplicates { get ; set ; }Gets or sets whether the same tag value can appear more than once. Defaults to false.
public int MaxTags { get ; set ; }Gets or sets the maximum number of tags accepted. Defaults to no limit.
public string Margin { get ; set ; }Gets or sets the outer container's CSS margin.
Methods
| Name | Description |
|---|---|
| SetPlaceholder | Sets the placeholder text shown in the inline entry field. |
| AllowingDuplicates | Allows the same tag value to be added more than once. |
| WithMaxTags | Caps the number of tags that can be added. |
| WithDelimiters | Sets the characters (in addition to Enter) that finalize the current entry into a tag. Defaults to {','}; pass an empty array to require Enter exclusively. |
| WithNormalizer | Sets a normalizer applied to every value before it becomes a tag (default: Trim). Return null or empty to reject the value silently. |
| OnTagAdded | Registers a callback fired whenever a new tag is added. |
| OnTagRemoved | Registers a callback fired whenever a tag is removed. |
| OnChange | Registers a callback fired whenever the tag list changes for any reason. |
| AsObservable | Returns an observable that emits the latest tag list whenever it changes. Useful for binding into UI.Defer(...) chains and other reactive composition primitives. |
| Add | Programmatically adds a tag (subject to duplicate/max checks and the normalizer). |
| Remove | Removes the first occurrence of the given tag, if present. |
| Clear | Clears every tag from the input. |
| Render | Renders the input's container element. |
public TagsInput SetPlaceholder(string placeholder)Sets the placeholder text shown in the inline entry field.
public TagsInput AllowingDuplicates()Allows the same tag value to be added more than once.
public TagsInput WithMaxTags(int max)Caps the number of tags that can be added.
public TagsInput WithDelimiters(params char[] delimiters)Sets the characters (in addition to Enter) that finalize the current entry into a tag. Defaults to {','}; pass an empty array to require Enter exclusively.
public TagsInput WithNormalizer(Func<string, string> normalizer)Sets a normalizer applied to every value before it becomes a tag (default: Trim). Return null or empty to reject the value silently.
public TagsInput OnTagAdded(Action<string> handler)Registers a callback fired whenever a new tag is added.
public TagsInput OnTagRemoved(Action<string> handler)Registers a callback fired whenever a tag is removed.
public TagsInput OnChange(Action handler)Registers a callback fired whenever the tag list changes for any reason.
public IObservable<IReadOnlyList<string>> AsObservable()Returns an observable that emits the latest tag list whenever it changes. Useful for binding into UI.Defer(...) chains and other reactive composition primitives.
public bool Add(string tag)Programmatically adds a tag (subject to duplicate/max checks and the normalizer).
Returns
true if the tag was added; false if rejected.
public bool Remove(string tag)Removes the first occurrence of the given tag, if present.