docs/extension-test-page
What's New

Validation messages

Figma Storybook GitHub

Validation messages are used to convey information to the user about the current state of the input element. These messages can have a critical, warning, positive, or info type.

Preview

Usage

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.

Variants

Positive

Critical

Warning

Info

Vue API 

import { DtValidationMessages } from '@dialpad/dialtone-vue';

Slots

Name
Type
icon

icon — replaces the default per-type DtIcon. Slot content must be a Dialtone icon (carries

Props

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: { message: "Some informative message", type: "critical|warning|positive|info"}

Validation messages documentation last updated Thursday, June 18, 2026