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>
API Reference
Highlight
| Prop | Default | Type |
|---|---|---|
query | string | string[]The query to highlight in the text | |
text | stringThe text to highlight | |
ignoreCase | booleanWhether to ignore case while matching | |
matchAll | booleanWhether 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;
}