Skip to main content

Forms

Form components are essential for creating intuitive, user-friendly interfaces that facilitate data input and management. Our design system offers a variety of form components, designed to accommodate diverse use cases while ensuring consistency, accessibility, and seamless interaction across platforms. Leverage these components to build effective forms that align with our design guidelines and best practices, ultimately enhancing the user experience.

The DHL User Interface Library does not offer a custom form element. However, the HTML form element can be utilized with its full features and must be used to wrap the form elements.

form-associated components​

One of the key features of the DHL User Interface Library components is their implementation as form-associated component.
This property is a game-changer as it allows custom elements to participate in form submission, be validated, and have their values automatically managed. This means you can create custom form elements that behave just like native form controls, providing a seamless experience for your users.

label and placeholder​

To create custom form elements, the variant prop is used to set the label, placeholder, and type. It is important to use label and placeholder to ensure the right level of accessibility. On the other hand, type is used to specify two different user experience variants: a static one and an animated one.
The variant property follows the type definition:

Variant Type Definition
{
  label:string,
  placeholder:string,
  type:Variants.static|Variants.animated,
};

Validation​

Custom Validation​

The components' validation state can be set using the validation property. The type value is mandatory and can be set to Variants.valid to indicate a valid state, Variants.invalid to indicate an invalid state, and Variants.note to indicate a neutral state. The message is optional, but it is recommended to include one when the type is set to Variants.note.

DhlValidationFeedbackValidationType Type Definition
{
  type: Variants.valid | Variants.invalid | Variants.note;
  message?: string;
};

HTML5 Native Validation​

One of the key features of the DHL User Interface Library form element components is their integration with HTML5 validation. As form-associated components, they leverage the native validation capabilities provided by HTML5. This means that you can take advantage of features such as required fields, pattern matching, and input type validation without any additional effort.

To use HTML5 validation with the DHL User Interface Library form element components, simply follow the standard HTML5 validation attributes and rules. Refer to the specific documentation of each component for more details on how to use and benefit from this powerful feature.

By leveraging HTML5 native validation, you can ensure a seamless and consistent user experience while reducing the need for custom validation logic.