Validation messages are typically paired with an input element. They are currently built in to some of our shared input components such as dt-input and dt-radio-group.
<dt-validation-messages
id="sample--02"
:validationMessages='[{"message":"Positive validation message","type":"positive"}]'
/><dt-validation-messages
id="sample--03"
:validationMessages='[{"message":"Critical validation message","type":"critical"}]'
/><dt-validation-messages
id="sample--04"
:validationMessages='[{"message":"Warning validation message","type":"warning"}]'
/><dt-validation-messages
id="sample--05"
:validationMessages='[{"message":"Info validation message","type":"info"}]'
/>import { DtValidationMessages } from '@dialpad/dialtone-vue';
Name
|
Type
|
|---|---|
icon | icon — replaces the default per-type DtIcon. Slot content must be a Dialtone icon (carries |
Name
|
Default
|
Type
|
|---|---|---|
iconClass | '' | string|array|object Additional class name for the icon wrapper element. |
id | generated unique ID | string The id of the validation message |
showMessages | true |
"true"
|
"false"
Show Validation messages |
validationMessages | [] | array Array of validation messages. Each message has the following structure:
|
Validation messages documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope