ValidationMessage

'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

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

Usage

Copyimport { 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

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