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'

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'

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'
</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.

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

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'

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'
</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.

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

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

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

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'
</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.

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

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'

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

Prop	Default	Type
`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;
}