The DWCJ supports seven different types of field components, each with various behaviors and implementations that suit various needs. While each of these components have variations in their implementations, there are commonalities amongst all of the field classes that will be described here.
This section describes common functionality amongst various field components in the DWCJ, and is not itself a class that can be instantiated and used.
Shared Field Properties
A field label is a descriptive text or title that is associated with the field. It provides a brief explanation or prompt to help users understand the purpose or expected input for that particular field. Field labels are not only important for usability but also play a crucial role in accessibility, as they enable screen readers and assistive technologies to provide accurate information and facilitate keyboard navigation.
A field is required when the user must provide a value before submitting a form. This is mainly used in conjunction with
setLabel(String) to provide a visual indication to users that the field is required.
Field components contain built-in visual validation which notifies users if a required field is empty, or has had values removed.
By calling the
setSpellCheck(true) method, you can enable the spellcheck feature for a field. This means that when a user enters text into the field, the browser or user agent may check the spelling of the entered text for errors.
All field components share the following events
|An event that is triggered when a component loses focus.
|An event that is triggered when a component gains focus, opposite of a blur event.
|An event that is triggered when one of "special keys" is pressed while the component has focus. These keys have specific codes, allowing for conditional logic to be implemented based on the key pressed.
|An event that is triggered when an is changed or modified. It typically occurs any time a user changes an aspect of the component, such as each time a letter is input or removed from an input component.
|An event that is triggered when the mouse cursor enters the boundaries of a component.
|An event that is triggered when the mouse cursor exits the boundaries of a component.
|An event that is triggered when the user presses the right mouse button while the cursor is over a component.
Parts and CSS Properties
As all field components are built from a singular web component, they will all share the following Shadow Parts and CSS Property values
These are the various parts of the shadow DOM for the component, which will be required when styling via CSS is desired.
These are the various CSS properties that are used in the component, with a short description of their use.
The reflected attributes of a component will be shown as attributes in the rendered HTML element for the component in the DOM. This means that styling can be applied using these attributes.
This component relies on the following components - see the related article for more detailed styling information: