Typography@knitui/components

Highlight

Highlight renders text with matched substrings wrapped in Mark. Supply one or more search terms via highlight, optionally tune matching behaviour with caseInsensitive, wholeWord, and accentInsensitive, and style marks globally or per-term with highlightStyles.

WebiOSAndroid1 style slots6 own props10 examples

Stories Source Tests Open in Storybook

import { Highlight } from "@knitui/components";

Playground

Loading playground…

childrenThe full string to scan and render.

highlightSubstring(s) to highlight. Pass a string or an array of strings.

caseInsensitiveMatch regardless of letter case. Default `true`.

true

wholeWordOnly match whole words (respects `\w` boundaries). Default `false`.

false

accentInsensitiveMatch regardless of diacritics / accents. Default `false`.

false

Playground

<Highlight
  highlight="fox"
  caseInsensitive
  wholeWord={false}
  accentInsensitive={false}
>
  The quick brown fox jumps over the lazy dog
</Highlight>

Examples

Single Term

Highlights a single word inside a longer sentence.

Loading example…

Single TermSource Storybook

Multiple Terms

Multiple terms are all highlighted simultaneously.

Loading example…

Multiple TermsSource Storybook

No Match

When no term matches the full text is rendered with no marks.

Loading example…

No MatchSource Storybook

Case Sensitive

Case-sensitive mode — uppercase search term does not match lowercase text.

Loading example…

Case SensitiveSource Storybook

Whole Word

Whole-word mode — only standalone words match, not substrings.

Loading example…

Whole WordSource Storybook

Global Highlight Styles

Global highlightStyles applies the same Mark style to every match.

Loading example…

Global Highlight StylesSource Storybook

Per Term Highlight Styles

Per-term highlightStyles maps each search term to its own Mark style.

Loading example…

Per Term Highlight StylesSource Storybook

Styles

Per-slot styles targets individual parts — here the mark applied to every highlight.

Loading example…

StylesSource Storybook

Accent Insensitive

Accent-insensitive matching treats accented and plain characters as equal.

Loading example…

Accent InsensitiveSource Storybook

Props

Prop	Type	Default	Description
`children` required	`string`	`The quick brown fox jumps over the lazy dog`	The full string to scan and render.
`highlight` required	`string \| string[]`	`fox`	Substring(s) to highlight. Pass a string or an array of strings.
`accentInsensitive`	`boolean \| undefined`	`false`	Match regardless of diacritics / accents. Default `false`.
`caseInsensitive`	`boolean \| undefined`	`true`	Match regardless of letter case. Default `true`.
`disabled` system	`boolean \| undefined`	—	Specifies the disabled state of the text view for testing purposes.
`highlightStyles`	`HighlightMarkProps \| HighlightStylesMap \| undefined`	—
`size` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`styles` system	`SlotStyles<HighlightStyles> \| undefined`	—	Per-slot style sugar. Slot: `mark` — props spread onto every highlighted `Mark`.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`wholeWord`	`boolean \| undefined`	`false`	Only match whole words (respects `\w` boundaries). Default `false`.

Style slots

Every part of Highlight can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`mark`	`styles={{ mark: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiTextElement> \| undefined`

Plus 506 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.