Marks the terms you pick inside a text, for search results and key words. It matches without regard to case and keeps the text as it was written.
Pass the text as a string and the term in highlight.
Pass a list to mark more than one term. When terms overlap, the longest one wins.
Use the value of an input as the term to mark the matches while you type.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| children | text to search in | string | - | '' |
| highlight | terms to mark, matched without regard to case | string / string[] | - | '' |
| ... | native props, passed to the root element | HTMLAttributes | 'id', 'className', ... | - |
The ref points at the root span.
Each match renders as a native mark element, which browsers and most screen readers treat as highlighted text. The meaning does not rely on the color alone.