Add error states and messages to the input
I'll add error states and messages to the floating label input:
I've enhanced the floating label input with error handling capabilities:
New Props Added:
error: Boolean flag to indicate if the input has an errorerrorMessage: String containing the error message to displayVisual Error Indicators:
Accessibility Improvements:
aria-invalid attribute when there's an errorDemo Updates:
I've also added a complete form demo that shows how to use the input with validation:
Form Validation:
User Experience:
Here's how to use the input with error handling:
<FloatingLabelInput
id="email"
name="email"
label="Email Address"
type="email"
value={email}
onChange={handleChange}
error={!!emailError}
errorMessage={emailError}
required
/>The component now provides a complete solution for form inputs with floating labels and error handling, all using shadcn/ui's theming system.
Implement form validation using Zod schema
I'll implement form validation using Zod schema with our floating label input:
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.
Zod Schema Definition:
React Hook Form Integration 1:
zodResolver to connect Zod with React Hook FormForm Field Components:
User Experience Improvements:
This implementation provides a complete solution for form validation that's both developer-friendly and offers an excellent user experience.
Add floationg label to Zod forms