Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

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 for instant visual identification. 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, DataTable, 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, ensuring matches are visible 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 DataTable 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 — 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..." />
    <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

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

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy