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

```ripple
import { Highlight } from 'ark-ripple/highlight';
import styles from 'styles/highlight.module.css';

export component 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>
}

```

### Dynamic Query

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

**Example: dynamic-query**

```ripple
import { Highlight } from 'ark-ripple/highlight';
import { track } from 'ripple';
import field from 'styles/field.module.css';
import styles from 'styles/highlight.module.css';

export component DynamicQuery() {
  const query = track('component');

  <div class={styles.Root}>
    <input
      class={field.Input}
      type="text"
      placeholder="Search text..."
      value={@query}
      onInput={(e) => {
        @query = (e.target as HTMLInputElement).value;
      }}
    />
    <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**

```ripple
import { Highlight } from 'ark-ripple/highlight';
import styles from 'styles/highlight.module.css';

export component 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>
}

```

### Case Sensitivity

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

**Example: ignore-case**

```ripple
import { Highlight } from 'ark-ripple/highlight';
import styles from 'styles/highlight.module.css';

export component 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>
}

```

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

```ripple
import { Highlight } from 'ark-ripple/highlight';
import styles from 'styles/highlight.module.css';

export component 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>
}

```

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

```ripple
import { Highlight } from 'ark-ripple/highlight';
import styles from 'styles/highlight.module.css';

export component 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>
}

```

## API Reference

**Component API Reference**

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