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:

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

Vue.js

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

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

Code

React

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

Angular

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

Vue.js

<dhl-validation-feedback :validation.prop='validation'></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	`dhl-validation-feedback-icon-${getRandomString()}`
validation	validation	An optional object to set-up a custom components validation state.	{ type: Variants.warning | Variants.valid | Variants.invalid | Variants.note; message?: string; }	undefined

Dependencies

Used by

• dhl-validation-feedback

Depends on

• dhl-icon-wrapper
• dhl-icon

Graph

---

Built by DHL User Interface Library Team!