# 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 id="basic" />

### Multiple Queries

You can highlight multiple terms by passing an array of strings to the `query` prop.

<Example id="multiple" />

### Case Sensitivity

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

<Example id="ignore-case" />

### 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 id="match-all" />

### 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 id="exact-match" />

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

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