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 of query inside 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.

<x-wirekit::highlight query="WireKit">Build with WireKit for Laravel Livewire.</x-wirekit::highlight>

Multiple Matches

All occurrences of the query are highlighted.

Multiple matches

The quick brown fox jumps over the lazy dog.

<x-wirekit::highlight query="the">The quick brown fox jumps over the lazy dog.</x-wirekit::highlight>

Matching is case-insensitive, but the original casing is preserved in the output. That holds beyond ASCII as well: query="über" finds "Über". The query is compared with the text a reader sees, so query="Tom & Jerry" finds it in content written as Tom & Jerry, and a search for amp never matches inside that entity.

Case-insensitive matching

Use Laravel, laravel, or LARAVEL — all match.

<x-wirekit::highlight query="laravel">Use Laravel, laravel, or LARAVEL — all match.</x-wirekit::highlight>

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

Was this page helpful?

Thank you for your feedback!

What was missing? (optional)

Voting requires cookies or local storage. What we store