Highlighter

Marks the parts of a string that match a search term, so a result list can show why each row matched. Matched runs render as mark elements, and the text is rendered as text, never as markup.

Basic

Matching is ordinal and case-insensitive by default, which is what a search box normally wants. Every occurrence of the term is marked, not only the first.

Several Terms

Queries takes precedence over Query, and empty terms inside it are skipped. Two terms that overlap produce one continuous <mark> rather than nested marks.

Whole Word

WholeWord is a prefix test, not a full-word test. It requires the match to begin at a word boundary; it does not require it to end at one. Searching "art" marks the first three letters of "article" but marks nothing in "chart".

Case Sensitive

CaseSensitive switches from StringComparison.OrdinalIgnoreCase to StringComparison.Ordinal.

Custom Mark Styling

MarkClass is merged with the built-in classes, which are a small radius, a 20% primary tint, half-unit horizontal padding and inherited text colour.

In a Result List

The usual reason to reach for this: a filtered list that shows which part of each row matched.

Behaviour

No wrapper element. The component renders only text nodes and <mark> elements, so it inherits the surrounding typography and adds no box of its own.

Queries wins over Query. When Queries is non-null it is used and Query is ignored. With no usable term at all, the whole Text renders as a single unmarked run.

Overlaps merge. Ranges are collected for every term, sorted by start position, then merged. Two terms that overlap produce one continuous mark rather than nested marks.

WholeWord is a prefix test. A match counts as a word start when it is at index 0 or the preceding character is not a letter or digit. The end of the match is not checked.