Utilities
Highlight

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.

<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>

Multiple Queries

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

<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>

Case Sensitivity

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

<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>

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.

<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>

API Reference

Highlight

PropDefaultType
query
string | string[]

The query to highlight in the text

text
string

The text to highlight

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;
}