ValidationFeedback
The ValidationFeedback
components allows is used to display a validation message upon user interaction with form components.
Import
- React
- Angular
- Vue.js
// 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"
If the DUIL has been installed, you can use the web component directly:
<dhl-validation-feedback></dhl-validation-feedback>
// 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
- Angular
- Vue.js
<DhlValidationFeedback validation={validation}></DhlValidationFeedback>
<dhl-validation-feedback [validation]="validation"></dhl-validation-feedback>
<dhl-validation-feedback :validation.prop='validation'></dhl-validation-feedback>
Interactive Demo
Migrating from DUIL 1.0
- Rename
Validation
type toDhlValidationFeedbackValidationType
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 | -- | 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!