# Highlight

URL: https://ark-ui.com/docs/utilities/highlight
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/utilities/highlight.mdx

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

---

<ComponentPreview id="Highlight" />

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

**Example: basic**

#### React

```tsx
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"
    />
  )
}

```

#### Solid

```tsx
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"
    />
  )
}

```

#### Vue

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

```

#### Svelte

```svelte
<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.

**Example: multiple**

#### React

```tsx
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"
    />
  )
}

```

#### Solid

```tsx
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"
    />
  )
}

```

#### Vue

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

```

#### Svelte

```svelte
<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.

**Example: ignore-case**

#### React

```tsx
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 />
)

```

#### Solid

```tsx
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 />
)

```

#### Vue

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

```

#### Svelte

```svelte
<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`.

**Example: match-all**

#### React

```tsx
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>
)

```

#### Solid

```tsx
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>
)

```

#### Vue

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

```

#### Svelte

```svelte
<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.

**Example: exact-match**

#### React

```tsx
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>
  )
}

```

#### Solid

```tsx
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>
  )
}

```

#### Vue

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

```

#### Svelte

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

**Component API Reference**

#### React

**Highlight Props:**

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


#### Solid

**Highlight Props:**

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


#### Vue

**Highlight Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `query` | `string | string[]` | Yes | The query to highlight in the text |
| `text` | `string` | Yes | The text to highlight |
| `exactMatch` | `boolean` | No | Whether to match the exact query |
| `ignoreCase` | `boolean` | No | Whether to ignore case while matching |
| `matchAll` | `boolean` | No | Whether to match multiple instances of the query |


## Customization

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

```tsx
<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.

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