Formik Form Components

A comprehensive collection of reusable, accessible, and customizable form components built with React, Material UI, Formik, and Tiptap. This library helps you build production-ready forms faster while maintaining consistency with Material Design.

Features

• 🚀 30+ production-ready form components
• 🎨 Consistent Material Design styling
• 🔍 Built-in validation support (Formik + Yup)
• 📱 Fully responsive and mobile-friendly
• 🎯 Full TypeScript support
• 🛠️ Easy theming with MUI
• 📅 Date & time pickers with calendar icons
• ✨ Rich text editor powered by Tiptap
• 📂 File & image uploads with preview
• 🌍 Internationalization (i18n) ready

Table of Contents

• Installation
• Peer Dependencies
• Getting Started
• Available Components
• Component Examples
• Theming
• TypeScript Support
• Contributing
• License

Installation

# npm
npm install formik-form-components

# yarn
yarn add formik-form-components

Getting Started

1. Wrap your app with ThemeProvider (recommended)

import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <YourApp />
    </ThemeProvider>
  );
}

2. Basic Form Example

import { Formik, Form } from 'formik';
import * as Yup from 'yup';
import { Button, Box } from '@mui/material';
import {
  AppInputField,
  AppCheckBox,
  AppDatePicker,
  AppRichTextEditor,
  AppRating,
  AppRadioGroup,
  AppMultiSelector,
} from 'formik-form-components';

const validationSchema = Yup.object({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
  dob: Yup.date().required('Date of birth is required'),
  bio: Yup.string().required('Bio is required'),
  rating: Yup.number().required('Rating is required'),
  gender: Yup.string().required('Gender is required'),
  interests: Yup.array().min(1, 'Select at least one interest'),
  terms: Yup.boolean().oneOf([true], 'You must accept the terms'),
});

const interests = [
  { value: 'sports', label: 'Sports' },
  { value: 'music', label: 'Music' },
  { value: 'reading', label: 'Reading' },
  { value: 'travel', label: 'Travel' },
];

const genderOptions = [
  { value: 'male', label: 'Male' },
  { value: 'female', label: 'Female' },
  { value: 'other', label: 'Other' },
];

export default function ExampleForm() {
  return (
    <Formik
      initialValues={{
        name: '',
        email: '',
        dob: null,
        bio: '',
        rating: 0,
        gender: '',
        interests: [],
        terms: false,
      }}
      validationSchema={validationSchema}
      onSubmit={(values) => console.log(values)}
    >
      {({ isSubmitting }) => (
        <Form>
          <Box sx={{ maxWidth: 600, mx: 'auto', p: 3 }}>
            <AppInputField name="name" label="Full Name" />
            <AppInputField name="email" label="Email" type="email" />
            <AppDatePicker name="dob" label="Date of Birth" />
            <AppRichTextEditor name="bio" label="Bio" />
            <AppRating name="rating" label="Rating" />
            <AppRadioGroup name="gender" label="Gender" options={genderOptions} row />
            <AppMultiSelector name="interests" label="Interests" options={interests} />
            <AppCheckBox
              name="terms"
              option={[{ name: 'terms', label: 'I agree to the terms', value: 'yes' }]}
            />
            <Button type="submit" variant="contained" disabled={isSubmitting}>
              Submit
            </Button>
          </Box>
        </Form>
      )}
    </Formik>
  );
}

Available Components

Form Inputs

• AppInputField
• AppTextArea
• AppCheckBox
• AppSwitch
• AppRadioGroup
• AppRating

Selection Components

• AppSelect
• AppSearchableSelect
• AppMultiSelector
• AppSearchableMultiSelector
• AppAutocomplete
• AppTagsCreator

Date & Time Pickers

• AppDatePicker
• AppTimePicker
• AppDateAndTimePicker
• AppDateTimePicker

File Handling

• AppUploadFile
• AppSimpleUploadFile
• AppUploadFile
• AppSimpleUploadFile

Theming

All components fully support Material UI theming.

import { createTheme } from '@mui/material/styles';

export const theme = createTheme({
  palette: {
    primary: { main: '#1976d2' },
    secondary: { main: '#dc004e' },
  },
});

Dark Mode

const darkTheme = createTheme({
  palette: { mode: 'dark' },
});

TypeScript Support

All components are written in TypeScript and fully typed.

type FormValues = {
  name: string;
  email: string;
};

Contributing

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Open a Pull Request

License

MIT © tkturners

Support

If you find a bug or have a feature request, please open an issue on GitHub: https://github.com/tkturners/formik-form-components/issues