WidgetOverlay

The translucent highlight the SDK draws over each form widget, so the widget stays visible when it has no appearance of its own or its appearance blends into the page. Replace it through the theme's components.widgetOverlay, and render WidgetOverlay inside your replacement to keep the built-in look for some widgets.

Behavior

• The built-in overlay renders only while isInteractive is true, and renders nothing otherwise.
• It covers the whole widget and lets clicks pass through to it: the overlay is view-only.
• Its background comes from the --widget-overlay-background CSS variable, and from --widget-focused-overlay-background while the widget has focus. See Theming and customization.
• A replacement receives the same props and positions itself: the built-in positioning styles are not part of the props. The className and style it receives carry the theme's classNames.widgetOverlay and styles.widgetOverlay, and the round shape of radio buttons, so forward them to the root element.

Example

Highlight only the required fields, and keep the built-in overlay for the rest:

import { ComponentProps } from 'react'
import { Config, useWidgetById, WidgetOverlay } from '@sdk-pdf/react'

function RequiredFieldOverlay(props: ComponentProps<typeof WidgetOverlay>) {
  const widget = useWidgetById(props.widgetId)

  if (!widget?.isRequired) return <WidgetOverlay {...props} />

  const { widgetId, isInteractive, style, ...divProps } = props
  if (!isInteractive) return null

  return (
    <div
      {...divProps}
      className={`${divProps.className} required-field-overlay`}
      // The positioning comes first, so the received style can reshape the overlay (round
      // for radio buttons).
      style={{ position: 'absolute', inset: 0, pointerEvents: 'none', ...style }}
    />
  )
}

// Defined outside the component, so the configuration stays referentially stable.
const theme: Config['theme'] = {
  components: { widgetOverlay: RequiredFieldOverlay },
}

The theme is passed to PdfProviders.