Formik Form Components

React form components with Tailwind CSS and Formik - ready to use out of the box!

A complete, production-ready form component library that requires zero configuration. Just install and start building beautiful forms instantly. All Tailwind CSS styles are precompiled and bundled, so you don't need to configure anything.

✨ Features

• 🎨 Zero Configuration - No Tailwind setup, no config files, just install and use
• 🔥 18+ Form Components - Complete form library with all common input types
• 💅 Pre-styled with Tailwind - Beautiful, modern design out of the box
• 🎯 Formik Integration - Seamless integration with Formik for form state management
• 🔧 TypeScript Support - Full TypeScript definitions included
• 🌐 International - Phone input with country codes

📦 Installation

npm install formik-form-components

Or with yarn:

yarn add formik-form-components

🚀 Quick Start

No configuration needed! Import and use:

import React from 'react';
import { Form, AppInputField, AppTextArea } from "formik-form-components";
// Import your preferred validation library (Yup, Zod, Joi, etc.)
import * as Yup from 'yup'; // Example using Yup

// Define your validation schema (example using Yup)
const validationSchema = Yup.object({
  name: Yup.string()
    .min(2, 'Name must be at least 2 characters')
    .required('Name is required'),
  email: Yup.string()
    .email('Invalid email address')
    .required('Email is required'),
  message: Yup.string()
    .min(10, 'Message must be at least 10 characters')
    .required('Message is required')
});

function MyForm() {
  return (
    <Form
      initialValues={{ name: "", email: "", message: "" }}
      onSubmit={(values: any) => console.log(values)}
      validationSchema={validationSchema}
    >
      <AppInputField
        name="name"
        label="Your Name"
        placeholder="John Doe"
        required
      />

      <AppInputField
        name="email"
        label="Email Address"
        type="email"
        placeholder="[email protected]"
        required
      />

      <AppTextArea
        name="message"
        label="Message"
        rows={4}
        placeholder="Your message here..."
        required
      />
    </Form>
  );
}

export default MyForm;

That's it! No Tailwind setup, no configuration files. Everything just works.

📚 Available Components

Form Components

• AppInputField - Text, email, password, number inputs with validation
• AppTextArea - Multi-line text input with auto-resize
• AppSelectInput - Dropdown select with search
• AppCheckBox - Single or multiple checkboxes
• AppRadioGroup - Radio button groups
• AppSwitch - Toggle switch
• AppDatePicker - Date picker with calendar
• AppDateAndTimePicker - Combined date and time picker
• AppRating - Star rating component
• AppPhoneNoInput - International phone number input
• AppMultiSelector - Multi-select dropdown with chips
• AppAutoCompleter - Autocomplete input with suggestions
• AppTagsCreator - Create and manage tags
• AppUploadFile - File upload with drag & drop
• AppSimpleUploadFile - Simple file upload
• SubmitButton - Animated submit button with loading state

Utility Components

• Form - Enhanced Formik Form wrapper
• Upload - Advanced file upload with preview
• RejectionFiles - Display file upload errors

🎯 Component Examples

Text Input with Password Toggle

<AppInputField
  name="password"
  label="Password"
  type="password"
  placeholder="Enter your password"
  required
/>

Phone Number Input

<AppPhoneNoInput
  name="phone"
  label="Phone Number"
  placeholder="Enter your phone number"
  required
/>

Date Picker

<AppDatePicker
  name="birthdate"
  label="Date of Birth"
  disableFuture
/>

Multi-Select

<AppMultiSelector
  name="skills"
  label="Your Skills"
  options={[
    { label: 'React', value: 'react' },
    { label: 'TypeScript', value: 'typescript' },
    { label: 'Node.js', value: 'nodejs' }
  ]}
  maxSelections={3}
  placeholder="Select your skills"
/>

File Upload with Preview

<AppUploadFile
  name="documents"
  label="Upload Documents"
  multiple
  accept={{ 'image/*': ['.png', '.jpg', '.jpeg'], 'application/pdf': ['.pdf'] }}
/>

Radio Group

<AppRadioGroup
  name="gender"
  label="Gender"
  options={[
    { label: 'Male', value: 'male' },
    { label: 'Female', value: 'female' },
    { label: 'Other', value: 'other' }
  ]}
  required
/>

Rating Component

<AppRating
  name="rating"
  label="Rate this product"
  helperText="Your rating helps us improve"
/>

Tags Creator

<AppTagsCreator
  name="tags"
  label="Tags"
  placeholder="Type and press Enter"
  options={['React', 'JavaScript', 'CSS']}
/>

Autocomplete

<AppAutoCompleter
  name="country"
  label="Country"
  placeholder="Search countries..."
  options={['USA', 'Canada', 'Mexico', 'UK', 'Germany']}
/>

🎨 Styling & Customization

All components come pre-styled with Tailwind CSS. You can customize them by passing a className prop:

<AppInputField
  name="email"
  label="Email"
  className="mb-6"
/>

<SubmitButton className="bg-purple-600 hover:bg-purple-700">
  Submit
</SubmitButton>

Submit Button with Loading State

<Form
  initialValues={{ email: '' }}
  onSubmit={async (values) => {
    await api.submit(values);
  }}
>
  {({ isSubmitting }) => (
    <div>
      <AppInputField name="email" label="Email" />
      <SubmitButton loading={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </SubmitButton>
    </div>
  )}
</Form>

🤝 Peer Dependencies

This package requires:

• react >= 16.8.0
• react-dom >= 16.8.0
• formik >= 2.0.0

These will be installed automatically if not present.

🌟 Why This Package?

Before (Traditional Approach)

1. Install Tailwind CSS
2. Configure tailwind.config.js
3. Set up PostCSS
4. Add Tailwind directives to CSS
5. Configure your build tool
6. Install form libraries
7. Build custom form components
8. Style everything manually

After (This Package)

1. npm install formik-form-components
2. Import and use components
3. Done! ✨

📄 License

MIT

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines before submitting PRs.

Made with ❤️ for the React community