VA Forms Library - Web Component Fields and Patterns
To align the forms library with VA.gov Design System, enhance form consistency, and establish a versatile shared resource in vets-website, we’ve introduced web component based fields and patterns. The most popular form components and patterns in the VADS have been implemented in the web-component-fields and web-component-patterns directories, respectively. These web component based fields and patterns in the forms library utilize U.S. Web Design System v3, which is the latest version supported by the VA Design System. These fields and patterns replace the widgets and definitions, but share very similar implementation methods.
Developer Guides
If you are preparing to create a new form, or update an existing from with web components patterns or fields, use these guide for step-by-step instructions for how to use and adopt web components for your VA form application.
How to use web component patterns
How to use web component fields
Impact on current forms and forms library users
Existing forms will not be impacting by these new web component fields and patterns. Those forms will continue to use their preexisting configurations and form fields. However, preexisting forms can be manually updated to use the new web component fields and patterns, which is detailed in the how to guides below. Forms library users starting on a new form will be impacted by these changes as they should now be exclusively using the new web component fields and patterns instead of the deprecated widgets and definitions.
Terminology
Web component - Web components are a type of component created by the http://VA.gov Design System. They are interactive and non-interactive UI elements that can be grouped together or presented individually. They are independent, reusable chunks of a user interface. More information can be found here.
Pattern - As defined by the VADS, patterns incorporate one or more page layouts and components to create an interaction that can span multiple pages, a short or long time span, and potentially even multiple channels. More information can be found here.
Forms library web component field - An implementation of a VADS web component that enables its use in a digitized form. When the VADS updates a web component, the forms library version is also automatically updated. Note: it is recommended to use forms library web component patterns when possible as they leverage standardized validation, labels, form data, etc.
Forms library web component pattern - An implementation of a VADS pattern that utilizes one or more forms library web component field(s) that enables its use in a digitized form. They feature standardized validation, labels, fields, and more and include an importable
uiSchemaandschemaForms library widget - The original method of rendering a field in react-jsonschema-form (what the forms library is forked from) that utilizes native React elements and USWDS stylings. These have been deprecated in favor of the web component fields due to multiple factors including maintainability, reusability, and accessibility factors
Help and feedback
Get help from the Platform Support Team in Slack.
Submit a feature idea to the Platform.