npm install mehul-form-validator-widget

🎯 Why Choose This Library?

🚀 Quick Start

import { FormProvider, Form, TextField, Button } from 'mehul-form-validator-widget'

function MyForm() {
  return (
    <FormProvider onSubmit={(values) => console.log(values)}>
      <Form>
        <TextField
          name="email"
          label="Email"
          type="email"
          validation={{ email: true }}
          required
        />
        
        <Button type="submit" fullWidth>Submit</Button>
      </Form>
    </FormProvider>
  )
}

✨ Key Features

• 🎯 25+ Components - Text, password, select, checkbox, radio, date picker, file upload & more
• ✅ Smart Validation - Email, URL, phone, regex, custom validators with debouncing
• 🎨 Theme System - Customize colors, borders, spacing with simple props
• 📱 Responsive - Works perfectly on mobile, tablet, and desktop
• ♿ Accessible - ARIA labels, keyboard navigation, screen reader support
• 💪 TypeScript - Fully typed for excellent developer experience
• 🌈 Animations - Beautiful micro-animations out of the box

🎨 Customization

Quick Theme Override

const theme = {
  primaryColor: "#6c5ce7",
  errorColor: "#ff4757",
  borderRadius: "12px"
}

<TextField name="email" theme={theme} />

CSS Classes

<TextField
  name="username"
  inputClassName="custom-input"
  labelClassName="custom-label"
  errorClassName="custom-error"
/>

📦 Available Components

Form Structure: FormProvider • Form • FormGroup

Inputs: TextField • PasswordField • TextArea • Select • PhoneInput • OTPInput

Selection: Checkbox • CheckboxGroup • RadioGroup • DatePicker • ColorPicker

Upload: FileUpload • Slider

Actions: Button • SuccessModal

✅ Validation Examples

// Email validation
<TextField
  name="email"
  validation={{ email: true, required: true }}
/>

// Password with rules
<PasswordField
  name="password"
  validation={{
    minLength: 8,
    pattern: /^(?=.*[A-Z])(?=.*[0-9])/,
    customMessage: "Must contain uppercase and number"
  }}
/>

// Custom validation
<TextField
  name="username"
  validation={{
    pattern: /^[a-zA-Z0-9_]+$/,
    minLength: 3,
    maxLength: 20
  }}
/>

🎯 Advanced Usage

Conditional Fields

const { values } = useFormContext()

return (
  <>
    <Select name="type" options={[...]} />
    {values.type === 'business' && (
      <TextField name="company" required />
    )}
  </>
)

Custom Validation

const { setFieldError } = useFormContext()

<TextField
  name="username"
  onChange={async (value) => {
    const exists = await checkUsername(value)
    if (exists) setFieldError('username', 'Taken')
  }}
/>

🎨 Example Themes

// Retro
const retro = {
  primaryColor: "#ff6b9d",
  borderColor: "#6c5ce7",
  borderRadius: "4px"
}

// Dark Mode
const dark = {
  primaryColor: "#00d2d3",
  backgroundColor: "#1a1a1a",
  textColor: "#ffffff"
}

// Minimal
const minimal = {
  primaryColor: "#000000",
  borderColor: "#e0e0e0",
  borderRadius: "0px"
}

⭐ Star this repo if you find it helpful!

🐛 Report Bug • 💡 Request Feature • 📖 Documentation

Made with ❤️ by Mehul