# 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'
import styles from 'styles/highlight.module.css'

export const Basic = () => (
  <p className={styles.Text}>
    <Highlight
      className={styles.Mark}
      query="component"
      text="Ark UI is a headless component library for building accessible web applications."
    />
  </p>
)

```

#### Solid

```tsx
import { Highlight } from '@ark-ui/solid/highlight'
import styles from 'styles/highlight.module.css'

export const Basic = () => (
  <p class={styles.Text}>
    <Highlight
      class={styles.Mark}
      query="component"
      text="Ark UI is a headless component library for building accessible web applications."
    />
  </p>
)

```

#### Vue

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

<template>
  <p :class="styles.Text">
    <Highlight
      :class="styles.Mark"
      query="component"
      text="Ark UI is a headless component library for building accessible web applications."
    />
  </p>
</template>

```

#### Svelte

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

<p class={styles.Text}>
  <Highlight
    class={styles.Mark}
    query="component"
    text="Ark UI is a headless component library for building accessible web applications."
  />
</p>

```

### Dynamic Query

Control the `query` prop with state to create an interactive search highlighting experience.

**Example: dynamic-query**

#### React

```tsx
import { Highlight } from '@ark-ui/react/highlight'
import { useState } from 'react'
import field from 'styles/field.module.css'
import styles from 'styles/highlight.module.css'

export const DynamicQuery = () => {
  const [query, setQuery] = useState('component')
  return (
    <div className={styles.Root}>
      <input
        className={field.Input}
        type="text"
        placeholder="Search text..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <p className={styles.Text}>
        <Highlight
          className={styles.Mark}
          query={query}
          text="With Ark UI, you can build accessible, custom components. Each component is fully typed and works seamlessly with React, Solid, Svelte, and Vue."
        />
      </p>
    </div>
  )
}

```

#### Solid

```tsx
import { Highlight } from '@ark-ui/solid/highlight'
import { createSignal } from 'solid-js'
import field from 'styles/field.module.css'
import styles from 'styles/highlight.module.css'

export const DynamicQuery = () => {
  const [query, setQuery] = createSignal('component')
  return (
    <div class={styles.Root}>
      <input
        class={field.Input}
        type="text"
        placeholder="Search text..."
        value={query()}
        onInput={(e) => setQuery(e.target.value)}
      />
      <p class={styles.Text}>
        <Highlight
          class={styles.Mark}
          query={query()}
          text="With Ark UI, you can build accessible, custom components. Each component is fully typed and works seamlessly with React, Solid, Svelte, and Vue."
        />
      </p>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Highlight } from '@ark-ui/vue/highlight'
import { ref } from 'vue'
import field from 'styles/field.module.css'
import styles from 'styles/highlight.module.css'

const query = ref('component')
</script>

<template>
  <div :class="styles.Root">
    <input :class="field.Input" type="text" placeholder="Search text..." v-model="query" />
    <p :class="styles.Text">
      <Highlight
        :class="styles.Mark"
        :query="query"
        text="With Ark UI, you can build accessible, custom components. Each component is fully typed and works seamlessly with React, Solid, Svelte, and Vue."
      />
    </p>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Highlight } from '@ark-ui/svelte/highlight'
  import field from 'styles/field.module.css'
  import styles from 'styles/highlight.module.css'

  let query = $state('component')
</script>

<div class={styles.Root}>
  <input class={field.Input} type="text" placeholder="Search text..." bind:value={query} />
  <p class={styles.Text}>
    <Highlight
      class={styles.Mark}
      {query}
      text="With Ark UI, you can build accessible, custom components. Each component is fully typed and works seamlessly with React, Solid, Svelte, and Vue."
    />
  </p>
</div>

```

### 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'
import styles from 'styles/highlight.module.css'

export const Multiple = () => (
  <p className={styles.Text}>
    <Highlight
      className={styles.Mark}
      query={['React', 'Vue']}
      text="Ark UI provides React, Solid, Vue, and Svelte components that are accessible and customizable."
    />
  </p>
)

```

#### Solid

```tsx
import { Highlight } from '@ark-ui/solid/highlight'
import styles from 'styles/highlight.module.css'

export const Multiple = () => (
  <p class={styles.Text}>
    <Highlight
      class={styles.Mark}
      query={['React', 'Vue']}
      text="Ark UI provides React, Solid, Vue, and Svelte components that are accessible and customizable."
    />
  </p>
)

```

#### Vue

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

<template>
  <p :class="styles.Text">
    <Highlight
      :class="styles.Mark"
      :query="['React', 'Vue']"
      text="Ark UI provides React, Solid, Vue, and Svelte components that are accessible and customizable."
    />
  </p>
</template>

```

#### Svelte

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

<p class={styles.Text}>
  <Highlight
    class={styles.Mark}
    query={['React', 'Vue']}
    text="Ark UI provides React, Solid, Vue, and Svelte components that are accessible and customizable."
  />
</p>

```

### 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'
import styles from 'styles/highlight.module.css'

export const IgnoreCase = () => (
  <p className={styles.Text}>
    <Highlight
      className={styles.Mark}
      text="TypeScript provides static type checking. Using typescript helps catch errors early in development."
      query="typescript"
      ignoreCase
    />
  </p>
)

```

#### Solid

```tsx
import { Highlight } from '@ark-ui/solid/highlight'
import styles from 'styles/highlight.module.css'

export const IgnoreCase = () => (
  <p class={styles.Text}>
    <Highlight
      class={styles.Mark}
      text="TypeScript provides static type checking. Using typescript helps catch errors early in development."
      query="typescript"
      ignoreCase
    />
  </p>
)

```

#### Vue

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

<template>
  <p :class="styles.Text">
    <Highlight
      :class="styles.Mark"
      text="TypeScript provides static type checking. Using typescript helps catch errors early in development."
      query="typescript"
      ignore-case
    />
  </p>
</template>

```

#### Svelte

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

<p class={styles.Text}>
  <Highlight
    class={styles.Mark}
    text="TypeScript provides static type checking. Using typescript helps catch errors early in development."
    query="typescript"
    ignoreCase
  />
</p>

```

### 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'
import styles from 'styles/highlight.module.css'

export const MatchAll = () => (
  <div className={styles.Root}>
    <div className={styles.Section}>
      <span className={styles.Label}>Match All</span>
      <p className={styles.Text}>
        <Highlight
          className={styles.Mark}
          text="Each component follows WAI-ARIA guidelines. Every component is rigorously tested to ensure accessibility."
          query="component"
          matchAll
        />
      </p>
    </div>
    <div className={styles.Section}>
      <span className={styles.Label}>Match First Only</span>
      <p className={styles.Text}>
        <Highlight
          className={styles.Mark}
          text="Each component follows WAI-ARIA guidelines. Every component is rigorously tested to ensure accessibility."
          query="component"
          matchAll={false}
        />
      </p>
    </div>
  </div>
)

```

#### Solid

```tsx
import { Highlight } from '@ark-ui/solid/highlight'
import styles from 'styles/highlight.module.css'

export const MatchAll = () => (
  <div class={styles.Root}>
    <div class={styles.Section}>
      <span class={styles.Label}>Match All</span>
      <p class={styles.Text}>
        <Highlight
          class={styles.Mark}
          text="Each component follows WAI-ARIA guidelines. Every component is rigorously tested to ensure accessibility."
          query="component"
          matchAll
        />
      </p>
    </div>
    <div class={styles.Section}>
      <span class={styles.Label}>Match First Only</span>
      <p class={styles.Text}>
        <Highlight
          class={styles.Mark}
          text="Each component follows WAI-ARIA guidelines. Every component is rigorously tested to ensure accessibility."
          query="component"
          matchAll={false}
        />
      </p>
    </div>
  </div>
)

```

#### Vue

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

<template>
  <div :class="styles.Root">
    <div :class="styles.Section">
      <span :class="styles.Label">Match All</span>
      <p :class="styles.Text">
        <Highlight
          :class="styles.Mark"
          text="Each component follows WAI-ARIA guidelines. Every component is rigorously tested to ensure accessibility."
          query="component"
          match-all
        />
      </p>
    </div>
    <div :class="styles.Section">
      <span :class="styles.Label">Match First Only</span>
      <p :class="styles.Text">
        <Highlight
          :class="styles.Mark"
          text="Each component follows WAI-ARIA guidelines. Every component is rigorously tested to ensure accessibility."
          query="component"
          :match-all="false"
        />
      </p>
    </div>
  </div>
</template>

```

#### Svelte

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

<div class={styles.Root}>
  <div class={styles.Section}>
    <span class={styles.Label}>Match All</span>
    <p class={styles.Text}>
      <Highlight
        class={styles.Mark}
        text="Each component follows WAI-ARIA guidelines. Every component is rigorously tested to ensure accessibility."
        query="component"
        matchAll
      />
    </p>
  </div>
  <div class={styles.Section}>
    <span class={styles.Label}>Match First Only</span>
    <p class={styles.Text}>
      <Highlight
        class={styles.Mark}
        text="Each component follows WAI-ARIA guidelines. Every component is rigorously tested to ensure accessibility."
        query="component"
        matchAll={false}
      />
    </p>
  </div>
</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'
import styles from 'styles/highlight.module.css'

export const ExactMatch = () => (
  <div className={styles.Root}>
    <div className={styles.Section}>
      <span className={styles.Label}>Partial Match</span>
      <p className={styles.Text}>
        <Highlight
          className={styles.Mark}
          query="box"
          text="The checkbox component renders a box element. Use combobox for autocomplete."
          matchAll
        />
      </p>
    </div>
    <div className={styles.Section}>
      <span className={styles.Label}>Exact Match</span>
      <p className={styles.Text}>
        <Highlight
          className={styles.Mark}
          query="box"
          text="The checkbox component renders a box element. Use combobox for autocomplete."
          exactMatch
          matchAll
        />
      </p>
    </div>
  </div>
)

```

#### Solid

```tsx
import { Highlight } from '@ark-ui/solid/highlight'
import styles from 'styles/highlight.module.css'

export const ExactMatch = () => (
  <div class={styles.Root}>
    <div class={styles.Section}>
      <span class={styles.Label}>Partial Match</span>
      <p class={styles.Text}>
        <Highlight
          class={styles.Mark}
          query="box"
          text="The checkbox component renders a box element. Use combobox for autocomplete."
          matchAll
        />
      </p>
    </div>
    <div class={styles.Section}>
      <span class={styles.Label}>Exact Match</span>
      <p class={styles.Text}>
        <Highlight
          class={styles.Mark}
          query="box"
          text="The checkbox component renders a box element. Use combobox for autocomplete."
          exactMatch
          matchAll
        />
      </p>
    </div>
  </div>
)

```

#### Vue

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

<template>
  <div :class="styles.Root">
    <div :class="styles.Section">
      <span :class="styles.Label">Partial Match</span>
      <p :class="styles.Text">
        <Highlight
          :class="styles.Mark"
          query="box"
          text="The checkbox component renders a box element. Use combobox for autocomplete."
          match-all
        />
      </p>
    </div>
    <div :class="styles.Section">
      <span :class="styles.Label">Exact Match</span>
      <p :class="styles.Text">
        <Highlight
          :class="styles.Mark"
          query="box"
          text="The checkbox component renders a box element. Use combobox for autocomplete."
          exact-match
          match-all
        />
      </p>
    </div>
  </div>
</template>

```

#### Svelte

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

<div class={styles.Root}>
  <div class={styles.Section}>
    <span class={styles.Label}>Partial Match</span>
    <p class={styles.Text}>
      <Highlight
        class={styles.Mark}
        query="box"
        text="The checkbox component renders a box element. Use combobox for autocomplete."
        matchAll
      />
    </p>
  </div>
  <div class={styles.Section}>
    <span class={styles.Label}>Exact Match</span>
    <p class={styles.Text}>
      <Highlight
        class={styles.Mark}
        query="box"
        text="The checkbox component renders a box element. Use combobox for autocomplete."
        exactMatch
        matchAll
      />
    </p>
  </div>
</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 |


#### Svelte

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


## Customization

The Highlight component wraps matched text in `<mark>` tags. Pass a `className` (or `class` in Solid/Svelte/Vue) to
style the highlighted portions.

```tsx
<Highlight
  text="Ark UI is a headless component library for building accessible web applications."
  query="component"
  className="highlight-mark"
/>
```

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

```css
.highlight-mark {
  background-color: #ffe5e4;
  color: #c9453b;
  border-radius: 0.125rem;
}
```