Highlight

Text highlighting with search query match markers.

Components

Highlight

typography

static

<arc-highlight>

Overview

Highlight renders text with matching portions wrapped in `<mark>` tags, styled with the accent color. Pass the full text via the `text` attribute and the search query via `query`. The component splits the text at each match boundary and wraps matching segments in styled marks. The matching is case-insensitive by default, which suits most search UIs. Set `case-sensitive` for exact-case matching in technical contexts like code search or regex patterns. The query string is escaped for regex safety, so special characters like `.`, `(`, and `*` are matched literally rather than interpreted as regex operators. Highlight is designed to pair with Search, DataGrid, CommandPalette, and any component that displays filtered results. The mark styling uses `var(--accent-primary)` with low opacity for the background and a stronger underline, so matches stand out without overwhelming the surrounding text.

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 DataGrid cells to highlight filtered column values
Update the query prop reactively as the user types for live highlighting

When not to use

Do not use Highlight for static emphasis. Use <strong> or Text variant="label" instead
Do not pass HTML content as the text prop. It expects plain text only
Do not use Highlight on very long text (>10KB) without debouncing the query updates
Do not set both text and slot content. The `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 match 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..." />
    <arc-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

textstring='': The full text to display and search within
querystring='': The search query to highlight within the text
caseSensitiveboolean=false: Whether matching should be case-sensitive

Highlight

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

Docs

Project

Arclight