Highlight

Used to emphasize specific words or phrases within a larger body of text.

Fully customizable and accessible UI components

Usage

The Highlight component takes a text prop containing the full text and a query prop specifying the text to highlight. It then renders the text with highlighted portions wrapped in <mark> tags.

import { Highlight } from '@ark-ui/react/highlight'

export const Basic = () => {
  return (
    <Highlight
      query="ipsum"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt"
    />
  )
}

import { Highlight } from '@ark-ui/solid/highlight'

export const Basic = () => {
  return (
    <Highlight
      query="ipsum"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt"
    />
  )
}

<script lang="ts" setup>
import { Highlight } from '@ark-ui/vue/highlight'
</script>

<template>
  <Highlight
    query="ipsum"
    text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt"
  />
</template>

<script lang="ts">
  import { Highlight } from '@ark-ui/svelte/highlight'
</script>

<Highlight
  query="ipsum"
  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt"
/>

Multiple Queries

You can highlight multiple terms by passing an array of strings to the query prop.

import { Highlight } from '@ark-ui/react/highlight'

export const Multiple = () => {
  return (
    <Highlight
      query={['ipsum', 'amet']}
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt"
    />
  )
}

import { Highlight } from '@ark-ui/solid/highlight'

export const Multiple = () => {
  return (
    <Highlight
      query={['ipsum', 'amet']}
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt"
    />
  )
}

<script lang="ts" setup>
import { Highlight } from '@ark-ui/vue/highlight'
</script>

<template>
  <Highlight
    :query="['ipsum', 'amet']"
    text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt"
  />
</template>

<script lang="ts">
  import { Highlight } from '@ark-ui/svelte/highlight'
</script>

<Highlight
  query={['ipsum', 'amet']}
  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt"
/>

Case Sensitivity

By default, the highlighting is case-sensitive. Use the ignoreCase prop to make it case-insensitive.

import { Highlight } from '@ark-ui/react/highlight'

export const IgnoreCase = () => (
  <Highlight text="The quick brown Fox jumps over the lazy Dog." query={['fox', 'dog']} ignoreCase />
)

import { Highlight } from '@ark-ui/solid/highlight'

export const IgnoreCase = () => (
  <Highlight text="The quick brown Fox jumps over the lazy Dog." query={['fox', 'dog']} ignoreCase />
)

<script setup lang="ts">
import { Highlight } from '@ark-ui/vue/highlight'
</script>

<template>
  <Highlight text="The quick brown Fox jumps over the lazy Dog." :query="['fox', 'dog']" :ignoreCase="true" />
</template>

<script lang="ts">
  import { Highlight } from '@ark-ui/svelte/highlight'
</script>

<Highlight text="The quick brown Fox jumps over the lazy Dog." query={['fox', 'dog']} ignoreCase />

Match All

By default, the Highlight component matches the first occurrence of the query. To highlight all occurrences of the query, set the matchAll prop to true.

import { Highlight } from '@ark-ui/react/highlight'

export const MatchAll = () => (
  <div>
    <h3>Match All</h3>
    <Highlight text="The quick brown fox jumps over the lazy fox." query="fox" matchAll={true} />

    <h3>Match First Occurrence Only</h3>
    <Highlight text="The quick brown fox jumps over the lazy fox." query="fox" matchAll={false} />
  </div>
)

import { Highlight } from '@ark-ui/solid/highlight'

export const MatchAll = () => (
  <div>
    <h3>Match All</h3>
    <Highlight text="The quick brown fox jumps over the lazy fox." query="fox" matchAll={true} />

    <h3>Match First Occurrence Only</h3>
    <Highlight text="The quick brown fox jumps over the lazy fox." query="fox" matchAll={false} />
  </div>
)

<script setup lang="ts">
import { Highlight } from '@ark-ui/vue/highlight'
</script>

<template>
  <div>
    <h3>Match All</h3>
    <Highlight text="The quick brown fox jumps over the lazy fox." query="fox" :matchAll="true" />

    <h3>Match First Occurrence Only</h3>
    <Highlight text="The quick brown fox jumps over the lazy fox." query="fox" :matchAll="false" />
  </div>
</template>

<script lang="ts">
  import { Highlight } from '@ark-ui/svelte/highlight'
</script>

<div>
  <h3>Match All</h3>
  <Highlight text="The quick brown fox jumps over the lazy fox." query="fox" matchAll={true} />

  <h3>Match First Occurrence Only</h3>
  <Highlight text="The quick brown fox jumps over the lazy fox." query="fox" matchAll={false} />
</div>

Exact Match

By default, the Highlight component matches partial words. Use the exactMatch prop to only highlight whole words that match the query exactly.

import { Highlight } from '@ark-ui/react/highlight'

export const ExactMatch = () => {
  return (
    <div>
      <p>Without exactMatch (highlights partial matches):</p>
      <Highlight query="cat" text="The cat is in the category. A cat-like creature." matchAll />
      <p style={{ marginTop: '1rem' }}>With exactMatch (highlights whole words only):</p>
      <Highlight query="cat" text="The cat is in the category. A cat-like creature." exactMatch matchAll />
    </div>
  )
}

import { Highlight } from '@ark-ui/solid/highlight'

export const ExactMatch = () => {
  return (
    <div>
      <p>Without exactMatch (highlights partial matches):</p>
      <Highlight query="cat" text="The cat is in the category. A cat-like creature." matchAll />
      <p style={{ 'margin-top': '1rem' }}>With exactMatch (highlights whole words only):</p>
      <Highlight query="cat" text="The cat is in the category. A cat-like creature." exactMatch matchAll />
    </div>
  )
}

<script lang="ts" setup>
import { Highlight } from '@ark-ui/vue/highlight'
</script>

<template>
  <div>
    <p>Without exactMatch (highlights partial matches):</p>
    <Highlight query="cat" text="The cat is in the category. A cat-like creature." :match-all="true" />
    <p style="margin-top: 1rem">With exactMatch (highlights whole words only):</p>
    <Highlight
      query="cat"
      text="The cat is in the category. A cat-like creature."
      :exact-match="true"
      :match-all="true"
    />
  </div>
</template>

<script lang="ts">
  import { Highlight } from '@ark-ui/svelte/highlight'
</script>

<div>
  <p>Without exactMatch (highlights partial matches):</p>
  <Highlight query="cat" text="The cat is in the category. A cat-like creature." matchAll />
  <p style="margin-top: 1rem">With exactMatch (highlights whole words only):</p>
  <Highlight query="cat" text="The cat is in the category. A cat-like creature." exactMatch matchAll />
</div>

API Reference

Highlight

Prop	Default	Type
`query`		`string \| string[]` The query to highlight in the text
`text`		`string` The text to highlight
`exactMatch`		`boolean` Whether to match whole words only
`ignoreCase`		`boolean` Whether to ignore case while matching
`matchAll`		`boolean` Whether to match multiple instances of the query

Customization

The Highlight component wraps matched text in <mark> tags.

<Highlight text="The quick brown fox jumps over the lazy fox." query="fox" className="highlighted-text" />

Style the mark tags using CSS to customize the appearance of highlighted text.

.highlighted-text {
  background-color: yellow;
}