---
title: ValidationMessage
description: A validation feedback component that displays status indicators with icons and colored text for form field validation
---

```tsx
'use client';

import { ValidationMessage } from '@/ui/forms/password/ValidationMessage';

export function ValidationMessageDemo() {
  return (
    <div className="flex flex-col gap-16">
      <ValidationMessage label="At least 8 characters" status="success" />
      <ValidationMessage label="Include a number" status="error" />
      <ValidationMessage label="Include a special character" status="default" />
    </div>
  );
}
```

## Installation

Using the CLI:

```bash
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/validation-message.json
```

Or manually, copy the following code into `/ui/forms/password/validation-message.tsx`:

```tsx
import clsx from 'clsx';
import { Icon } from '@clubmed/trident-icons';
import type { ValidationStatus } from '../../hooks/useInternalStatus';

export interface ValidationMessage {
  label: string;
  status: ValidationStatus;
}

const ICON_PROPS = {
  default: {
    iconName: 'Edit',
    iconColor: 'middleGrey',
  },
  error: {
    iconName: 'Error',
    iconColor: 'red',
  },
  success: {
    iconName: 'CheckDefault',
    iconColor: 'green',
  },
};

export function ValidationMessage({ label, status }: ValidationMessage) {
  const { iconName, iconColor } = ICON_PROPS[status];

  return (
    <div className="flex gap-[6px] px-20 items-center">
      <Icon name={iconName} width="30px" color={iconColor} />
      <span className={clsx('text-b3', `text-${iconColor}`)}>{label}</span>
    </div>
  );
}
```

## Usage

```tsx showLineNumbers
import { ValidationMessage } from '@/docs/lib/ui/forms/password/validation-message';

export function Component() {
  return (
    <div className="flex flex-col gap-16">
      <ValidationMessage label="Password must be at least 8 characters" status="success" />
      <ValidationMessage label="Password must include a number" status="error" />
      <ValidationMessage label="Password must include a special character" status="default" />
    </div>
  );
}
```

## API Reference

### ValidationMessage

| Prop     | Type                                | Default    | Description                                                   |
| -------- | ----------------------------------- | ---------- | ------------------------------------------------------------- |
| `label`  | `string`                            | (required) | The validation message text to display                        |
| `status` | `"default" \| "error" \| "success"` | (required) | The validation status that determines the icon and text color |

## Notes

- **Validation Status Icons**: Each status displays a different icon:

  - `default`: Edit icon in middle grey color
  - `error`: Error icon in red color
  - `success`: CheckDefault icon in green color

- **Color Coordination**: Text and icon colors match the validation status for clear visual feedback

- **Fixed Layout**: Component uses flexbox layout with 6px gap between icon and text, and 20px horizontal padding

- **Icon Sizing**: All icons are rendered at 30px width for consistency

- **Text Styling**: Text uses `text-b3` class for consistent typography across validation messages

- **Primary Use Case**: Designed for password field validation feedback, but can be used with any form field requiring inline validation messages

- **Accessibility**: Uses semantic HTML and color-coded icons to communicate validation state to all users

- **Compact Design**: Optimized for displaying multiple validation rules in a vertical stack without taking excessive space