---
title: Highlight
description: "`Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/highlight
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-highlight--basic
---

```tsx
<Highlight query="わかんない" colorScheme="warning">
  わかんないよ…。わっかんないよ！ ジュー君の言ってることはひとつもわかんないよ！
  ジュー君がいいって言ってるもの、何がいいのかわかんないよ！
  わかんない！私にはわかんないの！
  ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！
  狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！
</Highlight>
```

## Usage

```tsx
import { Highlight } from "@yamada-ui/react"
```

```tsx
import { Highlight } from "@/components/ui"
```

```tsx
import { Highlight } from "@workspaces/ui"
```

```tsx
<Highlight />
```

### Change Variant

```tsx
<VStack>
  <For each={["subtle", "solid", "text", "accent"]}>
    {(variant, index) => (
      <Highlight
        key={index}
        query="わかんない"
        colorScheme="warning"
        markProps={{ variant }}
      >
        わかんないよ…。わっかんないよ！
        ジュー君の言ってることはひとつもわかんないよ！
        ジュー君がいいって言ってるもの、何がいいのかわかんないよ！
        わかんない！私にはわかんないの！
        ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！
        狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！
      </Highlight>
    )}
  </For>
</VStack>
```

### Change Color Scheme

```tsx
<VStack>
  <For each={["warning", "success"]}>
    {(colorScheme, index) => (
      <Highlight key={index} query="わかんない" colorScheme={colorScheme}>
        わかんないよ…。わっかんないよ！
        ジュー君の言ってることはひとつもわかんないよ！
        ジュー君がいいって言ってるもの、何がいいのかわかんないよ！
        わかんない！私にはわかんないの！
        ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！
        狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！
      </Highlight>
    )}
  </For>
</VStack>
```

### Specify Multiple

```tsx
<Highlight query={["わかんない", "ジュー君"]} colorScheme="warning">
  わかんないよ…。わっかんないよ！ ジュー君の言ってることはひとつもわかんないよ！
  ジュー君がいいって言ってるもの、何がいいのかわかんないよ！
  わかんない！私にはわかんないの！
  ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！
  狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！
</Highlight>
```

### Style the Highlight

```tsx
<Highlight
  query="わかんない"
  colorScheme="warning"
  markProps={{ rounded: "full" }}
>
  わかんないよ…。わっかんないよ！ ジュー君の言ってることはひとつもわかんないよ！
  ジュー君がいいって言ってるもの、何がいいのかわかんないよ！
  わかんない！私にはわかんないの！
  ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！
  狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！
</Highlight>
```

### Use Fragments

By default, `Highlight` renders a `p` element. By setting `fragment`, `highlight` will use [Fragment](https://react.dev/reference/react/Fragment).

```tsx
<Text>
  <Highlight fragment query="わかんない" colorScheme="warning">
    わかんないよ…。わっかんないよ！
    ジュー君の言ってることはひとつもわかんないよ！
    ジュー君がいいって言ってるもの、何がいいのかわかんないよ！
    わかんない！私にはわかんないの！
    ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！
    狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！
  </Highlight>
</Text>
```

### Customize the Rendered Element

By using `useHighlight`, you can customize multiple elements and their styles.

```tsx
const chunks = useHighlight({
  query: ["わかんない", "ジュー君"],
  text: " わかんないよ…。わっかんないよ！ ジュー君の言ってることはひとつもわかんないよ！ ジュー君がいいって言ってるもの、何がいいのかわかんないよ！ わかんない！私にはわかんないの！ ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！ 狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！",
})

return (
  <Text>
    {chunks.map(({ match, text }, index) =>
      match ? (
        text === "わかんない" ? (
          <Mark key={index} colorScheme="warning">
            {text}
          </Mark>
        ) : (
          <Mark key={index} colorScheme="success">
            {text}
          </Mark>
        )
      ) : (
        text
      ),
    )}
  </Text>
)
```

## Props

| Prop          | Default | Type                                                                                                                                                        | Description                                                                                          |
| ------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| `as`          | -       | `As`                                                                                                                                                        | The HTML element to render.                                                                          |
| `asChild`     | -       | `boolean`                                                                                                                                                   | Merges its props onto its immediate child.                                                           |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                                                  | The CSS object.                                                                                      |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                   | Set color scheme variables.                                                                          |
| `children`    | -       | `string`                                                                                                                                                    | The text used for searching.                                                                         |
| `query`       | -       | `string \| string[]`                                                                                                                                        | Can be a single string or an array of strings. These are the terms that are highlighted in the text. |
| `align`       | -       | `"-moz-initial" \| "-webkit-match-parent" \| "center" \| "end" \| "inherit" \| "initial" \| "justify" \| "left" \| "match-parent" \| "revert-layer" ...`    | The CSS `text-align` property.                                                                       |
| `casing`      | -       | `"-moz-initial" \| "capitalize" \| "full-size-kana" \| "full-width" \| "inherit" \| "initial" \| "lowercase" \| "none" \| "revert-layer" \| "revert" ...`   | The CSS `text-transform` property.                                                                   |
| `decoration`  | -       | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "antiquewhite" \| "AppWorkspace" \| "aqua" \| "aquamarine" \| "auto" \| "azure" ...` | The CSS `text-decoration` property.                                                                  |
| `fragment`    | `false` | `boolean`                                                                                                                                                   | If `true`, `Fragment` is used for rendering.                                                         |
| `markProps`   | -       | `MarkProps`                                                                                                                                                 | Properties passed to the Mark component which is used to highlight the matched terms.                |