The Input Field
component is a versatile and essential UI element designed to capture user input. It supports various types such as text, password, email, and more. Below are examples illustrating different styles and configurations of input fields.
A simple text input field ideal for general use cases. This example demonstrates a basic text input with standard styling.
<VersatileInputField
id="basic-input"
placeholder="Basic text input"
value={textValue}
onChange={handleChange}
styleType="basic"
/>
A text input with rounded corners and a subtle shadow effect. This style is suitable for modern, minimalist designs.
<VersatileInputField
id="rounded-input"
placeholder="Rounded input"
value={textValue}
onChange={handleChange}
styleType="rounded"
/>
An input field featuring an icon to provide context or visual cues. This example uses the user icon.
<VersatileInputField
id="icon-input"
placeholder="Input with icon"
value={textValue}
onChange={handleChange}
styleType="icon"
icon={<FaUser size={20} />}
/>
An input field with an outlined border, which provides a clear and defined edge. Perfect for forms and interfaces with a clean look.
<VersatileInputField
id="outlined-input"
placeholder="Outlined input"
value={textValue}
onChange={handleChange}
styleType="outlined"
/>
An input field with a scaling animation effect on hover. This adds a dynamic touch to the input field.
<VersatileInputField
id="animated-input"
placeholder="Animated input"
value={textValue}
onChange={handleChange}
styleType="animated"
/>
A password input field with an error message when the input length is less than 5 characters. This showcases the error handling feature.
<VersatileInputField
id="password-input"
type="password"
placeholder="Password"
value={textValue}
onChange={handleChange}
styleType="basic"
errorMessage={error}
/>
An input field designed for email addresses, with validation to ensure proper email format.
<VersatileInputField
id="email-input"
type="email"
placeholder="Email address"
value={textValue}
onChange={handleChange}
styleType="basic"
/>
An input field tailored for phone numbers, allowing users to enter their contact details easily.
<VersatileInputField
id="phone-input"
type="tel"
placeholder="Phone number"
value={textValue}
onChange={handleChange}
styleType="basic"
/>
A date input field for selecting dates. Useful for scheduling and date-related data entry.
<VersatileInputField
id="date-input"
type="date"
placeholder="Select date"
value={textValue}
onChange={handleChange}
styleType="basic"
/>
A search input field that expands into a full input box when focused, enhancing the user experience with smooth animations.
<VersatileInputField
id="search-input"
placeholder="Search..."
value={textValue}
onChange={handleChange}
styleType="animated"
icon={<FaSearch size={20} />}
/>
An input field with a glowing border effect when focused, adding a visually appealing touch to your forms.
<VersatileInputField
id="glowing-input"
placeholder="Glowing border input"
value={textValue}
onChange={handleChange}
styleType="glowing"
/>