# ValidationError

```ts
import { ValidationError } from 'cx/widgets';
```

The `ValidationError` widget displays the validation error message from the nearest `Validator` in the component tree. It renders as a `<label>` element linked to the invalid field, allowing users to click on the error to focus the field.

```tsx
import { createModel } from "cx/data";
import { LabelsTopLayout } from "cx/ui";
import { DateField, Validator, ValidationError } from "cx/widgets";

interface Model {
  startDate: string;
  endDate: string;
}

const m = createModel<Model>();

export default (
  <LabelsTopLayout vertical>
    <DateField label="Start Date" value={m.startDate} required />
    <DateField label="End Date" value={m.endDate} required />
    <Validator
      value={{ start: m.startDate, end: m.endDate }}
      onValidate={(value) => {
        if (value.start && value.end && value.start > value.end)
          return "End date must be after start date";
      }}
      visited
    >
      <ValidationError class="block mt-2 px-3 py-2 bg-red-100 text-red-600 rounded text-sm" />
    </Validator>
  </LabelsTopLayout>
);

```

## Configuration

### Properties

| Property | Type     | Description                                        |
| -------- | -------- | -------------------------------------------------- |
| `class`  | `string` | CSS class names to apply to the error label        |
| `style`  | `object` | Inline styles to apply to the error label          |