Live Demo

What's in the Demo?

The demo showcases:

• Basic form validation with required fields
• Pattern validation for email addresses
• Custom validation functions
• Nested field support with dot notation
• Checkbox handling with proper boolean state
• Form submission with validation
• Error display using MUI's error and helperText props
• Various MUI components (TextField, Checkbox, Select, etc.)

Open in StackBlitz

Want to edit the full code? Open the demo in StackBlitz to get the complete development environment.

Key Features Demonstrated

1. Simple Integration

const { register, handleSubmit } = useMuiForm<FormState>({
  defaultValues: { email: '', name: '' }
})

<TextField {...register('email')} />

2. Built-in Validation

<TextField
  {...register('email', {
    required: 'Email is required',
    pattern: {
      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
      message: 'Invalid email address'
    }
  })}
/>

3. Automatic Error Display

No need to manually check formState.errors - the error and helperText props are automatically provided:

// This just works - errors are displayed automatically
<TextField {...register('email', { required: 'Required' })} />

4. Checkbox Support

Mark the field as a checkbox so register returns checked instead of value:

<Checkbox {...register('acceptTerms', { type: 'checkbox' })} />

Boolean fields are also auto-detected, but only when the boolean is seeded in defaultValues (e.g. { acceptTerms: false }). If it isn't, the value is undefined and the field is mistaken for a text input — so prefer the explicit { type: 'checkbox' }.

Next Steps

• Getting Started Guide
• Usage Examples
• API Reference