Text Highlight
Highlights matching portions of text, ideal for search results, autocomplete dropdowns, and select option filtering.
$ npm install @bloc-ui/text-highlight
Basic Usage
Simple Highlight
Pass [blocTextHighlight] and query to highlight matching segments.
AppleApplicationPineapple
No Match
When query doesn't match, the full text renders without highlights.
Banana
Interactive Search
Filter List
Type to filter and highlight matches — typical autocomplete / select dropdown pattern.
- Apple
- Apricot
- Banana
- Blueberry
- Cherry
- Grape
- Grapefruit
- Mango
- Orange
- Pineapple
- Strawberry
- Watermelon
Case Sensitivity
Case-Sensitive Mode
Set [caseSensitive]="true" for exact case matching.
case-insensitive:Apple Application
case-sensitive:Apple Application
Highlight Color
With Color
Use [highlighted]="true" to add a background color to matched text.
AppleApplicationPineapple
CSS Token Override
Override --bloc-text-highlight-* tokens to customize globally.
Blue themed highlight
Green themed highlight