I'll add error states and messages to the floating label input:

Error States and Messages Added

I've enhanced the floating label input with error handling capabilities:

1. New Props Added:

   • error: Boolean flag to indicate if the input has an error
   • errorMessage: String containing the error message to display

2. Visual Error Indicators:

   • Red border and focus ring when in error state
   • Red label text when in error state
   • Error message displayed below the input

3. Accessibility Improvements:

   • Added aria-invalid attribute when there's an error
   • Error message is properly associated with the input

4. Demo Updates:

   • Added static examples showing inputs with errors
   • Created a new interactive form demo with real-time validation

Interactive Form Demo

I've also added a complete form demo that shows how to use the input with validation:

1. Form Validation:

   • Validates required fields
   • Validates email format
   • Validates password length
   • Shows appropriate error messages

2. User Experience:

   • Errors clear as the user types
   • Form only submits when all validations pass
   • Visual feedback for errors

Usage Example

Here's how to use the input with error handling:

The component now provides a complete solution for form inputs with floating labels and error handling, all using shadcn/ui's theming system.

I'll implement form validation using Zod schema with our floating label input:

Zod Schema Validation Implementation

I've implemented form validation using Zod schema with React Hook Form and our floating label input component. This provides a robust, type-safe validation solution with excellent user experience.

Key Features

1. Zod Schema Definition:

   • Defined validation rules for each field
   • Name: minimum 2 characters
   • Email: valid email format
   • Password: minimum 8 characters with at least one uppercase letter, one lowercase letter, and one number
   • Confirm Password: must match password field

2. React Hook Form Integration 1:

   • Used zodResolver to connect Zod with React Hook Form
   • Set up form with proper typing using Zod's inferred types
   • Configured validation mode to trigger on change for immediate feedback

3. Form Field Components:

   • Used shadcn/ui's Form components for proper structure
   • Integrated our FloatingLabelInput with FormField
   • Passed error states and messages from Zod validation

4. User Experience Improvements:

   • Real-time validation as the user types
   • Detailed error messages for each validation rule
   • Submit button disabled until form is valid
   • Clear visual indication of errors

How It Works

1. The form uses Zod to define validation rules and React Hook Form to manage form state
2. When a user interacts with a field, React Hook Form validates it against the Zod schema
3. If validation fails, the error is displayed through our FloatingLabelInput component
4. The form can only be submitted when all fields pass validation

Benefits Over Manual Validation

1. Type Safety: TypeScript integration ensures your form values match your schema
2. Declarative Validation: Rules are defined clearly in one place
3. Reusable Schemas: Can be shared between client and server validation 23
4. Complex Validations: Supports advanced validations like field dependencies and custom rules

This implementation provides a complete solution for form validation that's both developer-friendly and offers an excellent user experience.