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
Validation message will automatically be connected to form fields, when it has the attribute data-field="validation", and is inside a field.
The form field gets aria-invalid="true" when the validation message has data-color="danger", or when data-color is not specified.
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. |