Highlight
A text component that visually highlights matching substrings via a query prop. Useful for search-result lists where the matching positions are runtime-determined.
Highlight vs. Mark:
<x-wirekit::highlight>wraps every occurrence ofqueryinside the slot dynamically.<x-wirekit::mark>is a static wrapper — author decides where the<mark>goes. Use Highlight for query/search-match rendering, Mark for editorial emphasis where the highlighted region is known at author-time.
Basic Usage
Highlighted query match
Build with
WireKit
for Laravel Livewire.
Multiple Matches
All occurrences of the query are highlighted.
Multiple matches
The
quick brown fox jumps over
the
lazy dog.
Case-Insensitive
Matching is case-insensitive, but the original casing is preserved in the output.
Case-insensitive matching
Use
Laravel
,
laravel
, or
LARAVEL
— all match.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
query |
string|null | null |
Substring to search for and highlight |
as |
string | 'span' |
HTML element to render |
scope |
string|null | null |
Scoped personalization name |
Keyboard Interaction
This component is purely presentational and does not respond to keyboard input.
Design Tokens
Highlighted matches use the same tokens as Mark:
| Token | Used for |
|---|---|
--color-wk-warning-bg |
Highlight background |
--color-wk-text |
Text color |
--radius-wk-sm |
Border radius |