# Highlight

URL: https://ark-ui.com/docs/utilities/highlight
LLM: https://ark-ui.com/llms.txt/utilities/highlight

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

---



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

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

### Dynamic Query

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

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

### Multiple Queries

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

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

### Case Sensitivity

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

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

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

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

### Exact Match

By default, the Highlight component matches partial words. Use the `exactMatch` prop to only highlight whole words that
match the query exactly.

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

## API Reference

### Highlight

#### Props

**`query`**
Type: `string | string[]`
Required: true
Default Value: `undefined`
Description: The query to highlight in the text

**`text`**
Type: `string`
Required: true
Default Value: `undefined`
Description: The text to highlight

**`exactMatch`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to match whole words only

**`ignoreCase`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to ignore case while matching

**`matchAll`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: 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;
}
```