Form Showcase

Introduction

The Form component is a comprehensive UI element designed to collect and validate user input across various fields and layouts. It supports different field types, validation rules, and submission methods. Below are examples demonstrating various configurations and use cases of the Form component.

Usage Examples

Basic Form

A simple form with basic text inputs. This example demonstrates a standard form setup with minimal styling.

<VersatileForm onSubmit={handleSubmit} className="border border-gray-900 p-6 rounded-md" backgroundColor="white" borderColor="gray-900">
  <VersatileInputField
    id="username"
    name="username"
    placeholder="Username"
    value={formValues.username}
    onChange={handleChange}
    styleType="basic"
  />
  <VersatileInputField
    id="password"
    name="password"
    type="password"
    placeholder="Password"
    value={formValues.password}
    onChange={handleChange}
    styleType="basic"
  />
  <button type="submit" className="bg-indigo-500 text-white p-2 rounded-md transition-transform duration-300 hover:scale-105">Submit</button>
</VersatileForm>

Form with Icons

This form includes input fields with icons for better visual context. Icons help users understand the input type.

<VersatileForm onSubmit={handleSubmit} className="border border-gray-300 p-6 rounded-md" backgroundColor="white" borderColor="gray-300">
  <VersatileInputField
    id="email"
    name="email"
    type="email"
    placeholder="Email address"
    value={formValues.email}
    onChange={handleChange}
    styleType="icon"
    icon={<FaEnvelope size={20} />}
    backgroundColor="white"
    borderColor="gray-300"
  />
  <VersatileInputField
    id="phone"
    name="phone"
    type="tel"
    placeholder="Phone number"
    value={formValues.phone}
    onChange={handleChange}
    styleType="icon"
    icon={<FaPhone size={20} />}
    backgroundColor="white"
    borderColor="gray-300"
  />
  <button type="submit" className="bg-indigo-500 text-white p-2 rounded-md transition-transform duration-300 hover:scale-105">Submit</button>
</VersatileForm>

Form with Additional Fields

This form includes additional fields such as date and address. It demonstrates a more comprehensive form setup.

<VersatileForm onSubmit={handleSubmit} className="border border-gray-300 p-6 rounded-md" backgroundColor="white" borderColor="gray-300">
  <VersatileInputField
    id="date"
    name="date"
    type="date"
    placeholder="Select date"
    value={formValues.date}
    onChange={handleChange}
    styleType="basic"
  />
  <VersatileInputField
    id="search"
    name="search"
    type="search"
    placeholder="Search"
    value={formValues.search}
    onChange={handleChange}
    styleType="icon"
    icon={<FaSearch size={20} />}
    backgroundColor="white"
    borderColor="gray-300"
  />
  <VersatileInputField
    id="address"
    name="address"
    placeholder="Address"
    value={formValues.address}
    onChange={handleChange}
    styleType="basic"
  />
  <button type="submit" className="bg-indigo-500 text-white p-2 rounded-md transition-transform duration-300 hover:scale-105">Submit</button>
</VersatileForm>