better-form

A powerful React form wizard library with built-in validation, conditional logic, and theming.

Features

• Multi-step Forms - Create complex wizards with progress tracking
• JSON Configuration - Define forms declaratively with JSON/TypeScript configs
• Built-in Validation - Required, min/max, regex, and custom validation rules
• Conditional Logic - Show/hide fields and steps dynamically based on form data
• Theming - Fully customizable with CSS variables or custom themes
• TypeScript - Full type safety with comprehensive type definitions
• Plugin System - Extend with custom field types and third-party integrations
• Accessible - Built with accessibility in mind (ARIA, keyboard navigation)

Quick Install

npm install @better_form/core

Quick Start

import { WizardProvider, WizardContainer, defaultFieldComponents } from '@better_form/core';
import '@better_form/core/styles';
 
const config = {
  id: 'my-form',
  steps: [{
    id: 'step-1',
    title: 'Personal Info',
    fieldGroups: [{
      id: 'personal',
      fields: [
        { id: 'name', name: 'name', label: 'Name', type: 'text', required: true },
        { id: 'email', name: 'email', label: 'Email', type: 'text', required: true },
      ],
    }],
  }],
};
 
export default function MyForm() {
  return (
    <WizardProvider
      config={config}
      fieldComponents={defaultFieldComponents}
      onComplete={(data) => console.log('Form submitted:', data)}
    >
      <WizardContainer />
    </WizardProvider>
  );
}

Works With

better-form integrates seamlessly with popular React frameworks:

Why better-form?

Ecosystem

• @better_form/core - Core library
• @better_form/plugin-google-places - Google Places address autocomplete

License

MIT License - Free for personal and commercial use.