Skip to main content

ValidationFeedback

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

Import

// 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"

Code

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

Interactive Demo

Migrating from DUIL 1.0

  • Rename Validation type to DhlValidationFeedbackValidationType

Readme

Properties

PropertyAttributeDescriptionTypeDefault
fieldIdfield-idAn 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.stringdhl-validation-feedback-icon-${getRandomString()}
validation--An optional object to set-up a custom components validation state.{ type: Variants.valid \| Variants.invalid \| Variants.note; message?: string; }undefined

Dependencies

Used by

Depends on

Graph


Built by DHL User Interface Library Team!