Components
Validation message
Validation message is used to display feedback related to the validation of user input, such as error messages or warnings in forms.
Unable to parse html
const PreviewEn = () => { return <ValidationMessage>This is a validation message.</ValidationMessage>; }; render(<PreviewEn />)
Usage
Use the class name ds-validation-message to style a validation message.
Form fields and status
A validation message will automatically be connected to a form field when it has the attribute data-field="validation" and is inside a <ds-field>.
The form element automatically gets aria-invalid="true" when a validation message is visible in the default color danger.
Note: Use the hidden attribute or add/remove the validation message element, rather than hiding/showing with CSS class names or inline styling. This ensures <ds-field> can correctly convey the visibility of the validation message to assistive technologies.
CSS variables and data attributes
Sizes are controlled with data-size and colors with data-color. The component will inherit from the closest parent where these are set.
| Name | Value |
|---|---|
| --dsc-validation-message-color | var(--ds-color-danger-text-subtle) |
| --dsc-validation-message-icon-size | var(--ds-icon-size) |
| --dsc-validation-message-icon-url | url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M7.74%202.47a.75.75%200%200%201%20.53-.22h7.46a.75.75%200%200%201%20.53.22l5.27%205.27c.14.14.22.33.22.53v7.46a.75.75%200%200%201-.22.53l-5.27%205.27a.75.75%200%200%201-.53.22H8.27a.75.75%200%200%201-.53-.22l-5.27-5.27a.75.75%200%200%201-.22-.53V8.27a.75.75%200%200%201%20.22-.53zm1.29%205.5a.75.75%200%200%200-1.06%201.06L10.94%2012l-2.97%202.97a.75.75%200%201%200%201.06%201.06L12%2013.06l2.97%202.97a.75.75%200%201%200%201.06-1.06L13.06%2012l2.97-2.97a.75.75%200%200%200-1.06-1.06L12%2010.94z%22%2F%3E%3C%2Fsvg%3E") |
| --dsc-validation-message-spacing | var(--ds-size-2) |
No relevant data attributes found.
Example
React
ValidationMessage
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |