ValidationFeedback

The ValidationFeedback components allows is used to display a validation message upon user interaction with form components.

Import

React

// with @dhl-official/react-library:
import { DhlValidationFeedback } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlValidationFeedback } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<duil310-dhl-validation-feedback></duil310-dhl-validation-feedback>

Vue.js

If the DUIL has been installed, you can use the web component directly:

<duil310-dhl-validation-feedback></duil310-dhl-validation-feedback>

Code

React

<DhlValidationFeedback validation={validation}></DhlValidationFeedback>

Angular

<duil310-dhl-validation-feedback [validation]="validation"></duil310-dhl-validation-feedback>

Vue.js

<duil310-dhl-validation-feedback :validation.prop='validation'></duil310-dhl-validation-feedback>

Interactive Demo

Migrating from DUIL 1.0

• Rename Validation type to DhlValidationFeedbackValidationType

Readme

Properties

Property	Attribute	Description	Type	Default
fieldId	field-id	An optional id prop for the validation-feedback component. It can be assigned to the HTML id value of the form element the validation refers to. By default it gets assigned a unique random generated value.	string	`duil310-dhl-validation-feedback-icon-${getRandomString()}`
validation	validation	An optional object to set-up a custom components validation state.	{ type: "warning" | "valid" | "invalid" | "note"; message?: string; }	undefined

Dependencies

Used by

• duil310-dhl-validation-feedback

Depends on

• duil310-dhl-icon-wrapper
• duil310-dhl-icon

Graph

---

Built by DHL User Interface Library Team!