Skip to main content

Field

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.

info

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

Label

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.

Required

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.

info

Field components contain built-in visual validation which notifies users if a required field is empty, or has had values removed.

Spellcheck

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.

Shared Events

info

All field components share the following events

EventsDescription
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

info

As all field components are built from a singular web component, they will all share the following Shadow Parts and CSS Property values

Shadow Parts

These are the various parts of the shadow DOM for the component, which will be required when styling via CSS is desired.

Loading...

CSS Properties

These are the various CSS properties that are used in the component, with a short description of their use.

Loading...

Reflected Attributes

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.

Loading...

Dependencies

This component relies on the following components - see the related article for more detailed styling information:

Loading...