# WidgetOverlay

Source: https://sdk.pdf.net/docs/v1/reference/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.

| Prop                                        | Type      | What it does                                                                                                                                             |
| ------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `widgetId`                                  | `string`  | The widget the overlay covers. Unused by the built-in overlay; a replacement can read the widget with [useWidgetById](https://sdk.pdf.net/docs/v1/reference/useWidgetById). |
| `isInteractive`                             | `boolean` | Whether the user can act on the widget now: fill it, or edit it, depending on the content policy.                                                        |
| `className`, `style`, and other `div` props |           | Forwarded to the overlay element.                                                                                                                        |

## Behavior [#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](https://sdk.pdf.net/docs/v1/guides/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 [#example]

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

```tsx
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](https://sdk.pdf.net/docs/v1/reference/PdfProviders).