chakra-ui/chakra-ui · error · Error

The children prop of Highlight must be a string

Error message

The children prop of Highlight must be a string

What it means

Highlight is documented to accept children as either a plain string or a render-prop function (see HighlightProps.children type), but the runtime implementation throws whenever children is not a string. The function form is therefore typed but unsupported; any non-string children — number, element, array, or the advertised render-prop — will throw.

Source

Thrown at packages/react/src/components/highlight/highlight.tsx:26

export interface HighlightProps {
  query: string | string[]
  children: string | ((props: HighlightChunk[]) => React.ReactNode)
  styles?: SystemStyleObject | undefined
  ignoreCase?: boolean | undefined
  matchAll?: boolean | undefined
}

/**
 * `Highlight` allows you to highlight substrings of a text.
 *
 * @see Docs https://chakra-ui.com/docs/components/highlight
 */
export function Highlight(props: HighlightProps): JSX.Element {
  const { children, query, ignoreCase, matchAll, styles } = props

  if (typeof children !== "string") {
    throw new Error("The children prop of Highlight must be a string")
  }

  const chunks = useHighlight({
    query,
    text: children,
    matchAll,
    ignoreCase,
  })

  return (
    <For each={chunks}>
      {(chunk, index) => {
        return chunk.match ? (
          <Mark key={index} css={styles}>
            {chunk.text}
          </Mark>
        ) : (
          <Fragment key={index}>{chunk.text}</Fragment>

View on GitHub (pinned to 13692aee26)

Solutions

1. Pass a plain string as children: <Highlight query='x'>some text</Highlight>.
2. If you need custom rendering of matched chunks, use the lower-level useHighlight hook from @ark-ui/react/highlight directly.
3. Coerce non-strings: wrap numbers/booleans with String(...) before passing.
4. Track upstream — the render-prop type is likely a docs/types defect; file an issue if you need it.

Example fix

// before
<Highlight query="chakra">{count}</Highlight>
// after
<Highlight query="chakra">{String(count)}</Highlight>

function renderHighlight(children: unknown, query: string) {
  if (typeof children !== 'string') {
    if (typeof children === 'number' || typeof children === 'boolean') {
      children = String(children)
    } else {
      throw new TypeError('Highlight children must be a string (or coercible primitive).')
    }
  }
  return <Highlight query={query}>{children as string}</Highlight>
}

const isHighlightText = (c: unknown): c is string => typeof c === 'string'

try {
  return <Highlight query={q}>{children}</Highlight>
} catch (e) {
  if (String(e) === 'The children prop of Highlight must be a string') {
    return <Highlight query={q}>{String(children)}</Highlight>
  }
  throw e
}

When it happens

Trigger: Passing <Highlight query='x'>{() => <em/>}</Highlight> (the typed render-prop form), a number child, an array of nodes, or JSX. Any of these fails the typeof children !== 'string' check.

Common situations: Trying to use the render-prop signature the types advertise; passing interpolated values like {count}; rendering Highlight around JSX; migrating from v2 where the API may have differed.

Related errors

• ColorSwatchMix doesn't support more than 4 colors

AI-assisted analysis of chakra-ui/chakra-ui@13692aee26 (2026-08-12). Data as JSON: /api/errors/1982004ee5bcc77c. Report an issue: GitHub.