TextInput Component

TextInput is a reusable React component that renders a text input field with customizable label, placeholder, and type properties. It is integrated with react-hook-form for form handling.

Features

• Built-in label animation for focus and value presence.
• Supports text and password input types with a show/hide password toggle.
• Fully integrated with react-hook-form.

Props

Prop	Type	Default	Description
label	string	Required	The text displayed as the input field's label.
placeholder	string	undefined	The input placeholder text when the input is empty.
register	UseFormRegister<TFieldValues>	Required	The react-hook-form register function for connecting input to form.
name	Path<TFieldValues>	Required	The name of the input field which is used to reference its data.
type	'text' | 'password'	'text'	The type of the input, can be either text or password.
error	string or undefined	undefined	Error Validation Message of Input
...rest	Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>	undefined	Any other props to pass down to the input element.

Component

This Component is designed to be used with react-hook-forms and tailwind css you need adjustments to your application if you are using other alternatives

here is the codesandbox link of component

Styling

The component uses Tailwind CSS classes for styling. To customize the styles, modify the className properties within the component.

Accessibility

The TextInput component follows basic accessibility guidelines with a focusable input field and a label that is associated with it via the htmlFor property.

Dependencies

• React ^17.0.0 or higher
• react-hook-form ^7.0.0 or higher

Notes

• This component is designed to be used with forms managed by react-hook-form.
• Ensure that the icons OpenEye and CloseEye are imported and available in the project.
• The name prop is used to reference the form value and must be unique across the form.

---

This document provides a concise overview of the TextInput component, detailing its functionality, props, usage, styling, accessibility considerations, and dependencies. Adjust the paths and versions according to your actual project setup.