--- title: "Highlight required PDF form fields | Nutrient Web SDK" canonical_url: "https://www.nutrient.io/guides/web/knowledge-base/highlight-required-fields/" md_url: "https://www.nutrient.io/guides/web/knowledge-base/highlight-required-fields.md" last_updated: "2026-05-18T14:28:53.388Z" description: "Style required PDF form fields with CSS or programmatic styling using Nutrient Web SDK. Highlight empty required fields with custom borders and colors." --- # Highlight required form fields You can highlight required form fields that are empty using two approaches: - **CSS styling** — Apply styles through custom stylesheets using the `:invalid` pseudo-class. This approach doesn’t require the Form Creator license and provides a declarative way to style fields. - **Programmatic styling** — Update widget annotations directly using JavaScript for complete control over appearance. This approach requires the Form Creator license. ## CSS styling approach To style required form fields using CSS, follow the steps below. 1. Set the `required` flag on form fields: ```js // Retrieve all form fields. const formFields = await instance.getFormFields(); // Set the `required` property for all form fields. const updatedFields = formFields.map((formField) => formField.set("required", true), ); // Update the form fields. await instance.update(updatedFields); ``` When you set the `required` flag on `NutrientViewer.FormFields.TextFormField`, `NutrientViewer.FormFields.ComboBoxFormField`, and `NutrientViewer.FormFields.ListBoxFormField`, Nutrient renders them with the `PSPDFKit-Annotation-Widget-Required` CSS class and sets the HTML `required` attribute. 2. Use a [custom stylesheet](https://www.nutrient.io/../../customizing-the-interface/css-customization/) to provide your custom CSS: ```js const instance = await NutrientViewer.load({...configuration, styleSheets: ["https://example.com/my-stylesheet.css"], }); ``` 3. Use an `:invalid` pseudo-class to mark empty required fields: ```css /* This matches empty required fields. */.PSPDFKit-Annotation-Widget-Required:invalid { border: 1px solid red; } /* This matches filled required fields. */.PSPDFKit-Annotation-Widget-Required { border: 1px solid green; } ``` ## Programmatic styling approach To style required fields programmatically with full control over appearance, update the widget annotations directly. This approach requires the Form Creator license: ```js // Retrieve all form fields. const formFields = await instance.getFormFields(); // Filter for required fields. const requiredFields = formFields.filter((formField) => formField.required); if (requiredFields.size === 0) { console.warn("No required fields found in document"); return; } // Update widget styling for required fields. const widgetUpdates = []; for (const formField of requiredFields.toArray()) { // Get all pages and find widgets for this form field. for (let pageIndex = 0; pageIndex < instance.totalPageCount; pageIndex++) { const annotations = await instance.getAnnotations(pageIndex); const widgets = annotations.filter( (ann) => ann instanceof NutrientViewer.Annotations.WidgetAnnotation && formField.annotationIds.includes(ann.id), ); // Style each widget. widgets.forEach((widget) => { const updatedWidget = widget.set("borderColor", new NutrientViewer.Color({ r: 255, g: 0, b: 0 })).set("borderWidth", 2); widgetUpdates.push(updatedWidget); }); } } // Apply all updates. if (widgetUpdates.length > 0) { await instance.update(widgetUpdates); console.log(`Styled ${widgetUpdates.length} widget(s) for required fields`); } else { console.warn("No widgets found for required fields"); } ``` > When working with documents that have many pages, consider caching annotations to improve performance. Refer to the [iterate over form fields](https://www.nutrient.io/guides/web/knowledge-base/iterate-over-form-fields.md) knowledge base article for an optimized caching pattern that loads all page annotations in parallel. --- ## Related pages - [Add Custom Keyboard Shortcuts](/guides/web/knowledge-base/add-custom-keyboard-shortcuts.md) - [How to add a custom toolbar item to display current zoom percentage](/guides/web/knowledge-base/add-custom-zoom-perentage.md) - [Add Listener Text Note Annotation](/guides/web/knowledge-base/add-listener-text-note-annotation.md) - [Add Listener Toolbar Item](/guides/web/knowledge-base/add-listener-toolbar-item.md) - [Add Signature Initials](/guides/web/knowledge-base/add-signature-initials.md) - [Listen to an annotation’s hover event](/guides/web/knowledge-base/annotations-hover-event.md) - [Blurry Print Resolution](/guides/web/knowledge-base/blurry-print-resolution.md) - [Automatic Annotation Field Tab Ordering](/guides/web/knowledge-base/automatic-annotation-field-tab-ordering.md) - [Change Default Line Width Ink Annotations](/guides/web/knowledge-base/change-default-line-width-ink-annotations.md) - [Check Document Contains Annotations](/guides/web/knowledge-base/check-document-contains-annotations.md) - [Keep widget annotation dimensions consistent across devices](/guides/web/knowledge-base/consistent-widget-annotation-dimensions.md) - [Customize Page Indicator](/guides/web/knowledge-base/customize-page-indicator.md) - [Check Password Protected Files](/guides/web/knowledge-base/check-password-protected-files.md) - [Control Appearance Of Delete Button On Ink Annotations](/guides/web/knowledge-base/control-appearance-of-delete-button-on-ink-annotations.md) - [Create Highlight Annotations From Text Extraction Technology](/guides/web/knowledge-base/create-highlight-annotations-from-text-extraction-technology.md) - [Default To Cloudy Border](/guides/web/knowledge-base/default-to-cloudy-border.md) - [Delete All Annotations](/guides/web/knowledge-base/delete-all-annotations.md) - [Deselect Text](/guides/web/knowledge-base/deselect-text.md) - [Detect Pspdfkit Ui Loaded](/guides/web/knowledge-base/detect-pspdfkit-ui-loaded.md) - [Determine Current Layout Mode](/guides/web/knowledge-base/determine-current-layout-mode.md) - [Disable Context Menu](/guides/web/knowledge-base/disable-context-menu.md) - [How to disable text annotation movement in web apps](/guides/web/knowledge-base/disable-text-annotation-movement.md) - [Download Exported Document](/guides/web/knowledge-base/download-exported-document.md) - [Disable Resize Of Annotations](/guides/web/knowledge-base/disable-resize-of-annotations.md) - [Export Ink Annotation Image](/guides/web/knowledge-base/export-ink-annotation-image.md) - [Find Ink Annotation For Signature Form Field](/guides/web/knowledge-base/find-ink-annotation-for-signature-form-field.md) - [Focus Viewer After Loading](/guides/web/knowledge-base/focus-viewer-after-loading.md) - [Focus the delete button in a confirm dialog](/guides/web/knowledge-base/focus-delete-button-in-confirm-modal-component.md) - [Extracting text and cursor position in annotations](/guides/web/knowledge-base/extract-annotation-text-and-retrieve-cursor-position.md) - [Focus Widget Annotation](/guides/web/knowledge-base/focus-widget-annotation.md) - [Get Entered Document Password](/guides/web/knowledge-base/get-entered-document-password.md) - [Fix errors with unsupported form field actions](/guides/web/knowledge-base/handle-unsupported-form-field-actions.md) - [Get Visible Annotations](/guides/web/knowledge-base/get-visible-annotations.md) - [Handling Clicks On Custom Overlays](/guides/web/knowledge-base/handling-clicks-on-custom-overlays.md) - [How Do I Limit The Number Of Annotations](/guides/web/knowledge-base/how-do-i-limit-the-number-of-annotations.md) - [How Do I Disable Scrolling On Page Edges](/guides/web/knowledge-base/how-do-i-disable-scrolling-on-page-edges.md) - [How Do I Prevent Printing Annotations](/guides/web/knowledge-base/how-do-i-prevent-printing-annotations.md) - [Resize multiline text fields to avoid overflow](/guides/web/knowledge-base/how-do-i-resize-form-fields.md) - [How Do I Toggle The Theme](/guides/web/knowledge-base/how-do-i-toggle-the-theme.md) - [How Do I Rotate A Page](/guides/web/knowledge-base/how-do-i-rotate-a-page.md) - [How Do I Zoom To A Specific Value](/guides/web/knowledge-base/how-do-i-zoom-to-a-specific-value.md) - [How To Create Bookmarks From Outline Elements](/guides/web/knowledge-base/how-to-create-bookmarks-from-outline-elements.md) - [Image Attachments Lost Stamp Annotation Templates](/guides/web/knowledge-base/image-attachments-lost-stamp-annotation-templates.md) - [License Registered Different Bundle Id](/guides/web/knowledge-base/license-registered-different-bundle-id.md) - [Iterate over form fields and widgets](/guides/web/knowledge-base/iterate-over-form-fields.md) - [Load Pdf As Arraybuffer](/guides/web/knowledge-base/load-pdf-as-arraybuffer.md) - [Link Text](/guides/web/knowledge-base/link-text.md) - [Load Pdf From Stream](/guides/web/knowledge-base/load-pdf-from-stream.md) - [Loading Multiple Files](/guides/web/knowledge-base/loading-multiple-files.md) - [Nutrient Size Optimization](/guides/web/knowledge-base/nutrient-size-optimization.md) - [Load Pdf Stub From String](/guides/web/knowledge-base/load-pdf-stub-from-string.md) - [Disabling automatic synchronization in Nutrient Web SDK](/guides/web/knowledge-base/manual-instant-sync.md) - [Observe Document Editor Visibility](/guides/web/knowledge-base/observe-document-editor-visibility.md) - [Override Ink Signature Dialog](/guides/web/knowledge-base/override-ink-signature-dialog.md) - [Override User Agent](/guides/web/knowledge-base/override-user-agent.md) - [Persist Currently Edited Note Test](/guides/web/knowledge-base/persist-currently-edited-note-test.md) - [Overview](/guides/web/knowledge-base/overview.md) - [Prevent Shortcut Printing](/guides/web/knowledge-base/prevent-shortcut-printing.md) - [Persist Ink Signatures Across Instances](/guides/web/knowledge-base/persist-ink-signatures-across-instances.md) - [Place Annotation At Visible Center](/guides/web/knowledge-base/place-annotation-at-visible-center.md) - [Prevent Editing Content Text Annotation](/guides/web/knowledge-base/prevent-editing-content-text-annotation.md) - [Process Currently Rendered Pages](/guides/web/knowledge-base/process-currently-rendered-pages.md) - [Programmatically Navigate To Page](/guides/web/knowledge-base/programmatically-navigate-to-page.md) - [Render Document Full Height](/guides/web/knowledge-base/render-document-full-height.md) - [Programmatic Comment Annotations](/guides/web/knowledge-base/programmatic-comment-annotations.md) - [Read-only forms](/guides/web/knowledge-base/read-only-forms.md) - [Render Night Mode](/guides/web/knowledge-base/render-night-mode.md) - [Render Page Black White](/guides/web/knowledge-base/render-page-black-white.md) - [Render Visible Area In Current Page](/guides/web/knowledge-base/render-visible-area-in-current-page.md) - [Render Page Without Annotations](/guides/web/knowledge-base/render-page-without-annotations.md) - [Render Watermark When Printing](/guides/web/knowledge-base/render-watermark-when-printing.md) - [Restore Last Seen Page](/guides/web/knowledge-base/restore-last-seen-page.md) - [Save Modified Pdf To Document Engine](/guides/web/knowledge-base/save-modified-pdf-to-document-engine.md) - [Show Annotations Properties As Tooltip](/guides/web/knowledge-base/show-annotations-properties-as-tooltip.md) - [Rotate Ink Annotation](/guides/web/knowledge-base/rotate-ink-annotation.md) - [Show Focus Ring Read Only](/guides/web/knowledge-base/show-focus-ring-read-only.md) - [Submit Ink Signatures With Form](/guides/web/knowledge-base/submit-ink-signatures-with-form.md) - [Wait For Element Appear](/guides/web/knowledge-base/wait-for-element-appear.md) - [Web Sdk Vs Dws Viewer](/guides/web/knowledge-base/web-sdk-vs-dws-viewer.md) - [Easily zoom to specific annotations in PDF](/guides/web/knowledge-base/zoom-to-specific-annotation.md)