<arc-highlight> Overview
Guidelines
When to use
- Use Highlight in search result lists to show why each result matched
- Pair with Search or CommandPalette to highlight the active query in results
- Use in DataTable cells to highlight filtered column values
- Update the query prop reactively as the user types for live highlighting
When not to use
- Use Highlight for static emphasis — use <strong> or Text variant="label" instead
- Pass HTML content as the text prop — it expects plain text only
- Use Highlight on very long text (>10KB) without debouncing the query updates
- Set both text and slot content — text prop takes precedence
Features
- Automatic text splitting and mark wrapping at match boundaries
- Case-insensitive matching by default, with case-sensitive option
- Regex-safe query escaping — special characters matched literally
- Themed mark styling with accent color background and underline
- Zero-overhead for non-matching text — renders plain text without marks
- CSS parts for mark and text segments for custom styling
Preview
Usage
<arc-highlight
text="The quick brown fox jumps over the lazy dog"
query="fox"
></arc-highlight>
<!-- Case-sensitive matching -->
<arc-highlight
text="Hello World, hello world"
query="Hello"
case-sensitive
></arc-highlight>import { Highlight } from '@arclux/arc-ui-react';
function SearchResults({ results, query }) {
return results.map(r => (
<Highlight key={r.id} text={r.title} query={query} />
));
}<script setup>
import { ref } from 'vue';
import { Highlight } from '@arclux/arc-ui-vue';
const query = ref('');
const text = 'The quick brown fox jumps over the lazy dog';
</script>
<template>
<input v-model="query" placeholder="Search..." />
<Highlight :text="text" :query="query" />
</template><script>
import { Highlight } from '@arclux/arc-ui-svelte';
let query = '';
</script>
<input bind:value={query} placeholder="Search..." />
<Highlight text="The quick brown fox" {query} />import { Component } from '@angular/core';
import { Highlight } from '@arclux/arc-ui-angular';
@Component({
imports: [Highlight],
template: `
<input [(ngModel)]="query" placeholder="Search..." />
<Highlight [text]="text" [query]="query" />
`,
})
export class MyComponent {
text = 'The quick brown fox jumps over the lazy dog';
query = '';
}import { Highlight } from '@arclux/arc-ui-solid';
import { createSignal } from 'solid-js';
const [query, setQuery] = createSignal('');
<input onInput={(e) => setQuery(e.target.value)} />
<Highlight text="The quick brown fox" query={query()} />import { Highlight } from '@arclux/arc-ui-preact';
import { useState } from 'preact/hooks';
const [query, setQuery] = useState('');
<input onInput={(e) => setQuery(e.target.value)} />
<Highlight text="The quick brown fox" query={query} /><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-highlight — requires highlight.css + tokens.css (or arc-ui.css) -->
<span class="arc-highlight">
<span></span>
</span><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-highlight — self-contained, no external CSS needed -->
<span class="arc-highlight" style="display: inline">
<span></span>
</span>API
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | '' | The full text to display and search within |
query | string | '' | The search query to highlight within the text |
case-sensitive | boolean | false | Whether matching should be case-sensitive |