Input Field Showcase

Introduction

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.

Usage Examples

1. Basic Text Input

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"
/>

2. Rounded Input with Shadow

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"
/>

3. Input with Icon

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} />}
/>

4. Outlined Input

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"
/>

5. Animated Input

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"
/>

6. Password Input with Error

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}
/>

7. Email Input

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"
/>

8. Phone Number Input

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"
/>

9. Date Input

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"
/>

10. Search Input with Animation

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} />}
/>

11. Glowing Border Input

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"
/>