Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Fielder logo


A field-first form library for React and React Native.

build version size coverage docs


Fielder is a form library for React and React Native that has been built from the ground up with a field-first approach to validation.


⚡️ Synchronous validation - no cascading renders

🛎 Validation events - validation can differ per event (change, blur, submit, etc.)

🪝 Hooks that work - hooks respond to validation changes

🧠 Evolving schemas - validation logic evolves with the UI

Basic usage

Install Fielder

Add Fielder to your project.

npm i fielder

Import the module

Use fielder or fielder/preact.

// React
import { useForm, ... } from 'fielder';

// Preact
import { useForm, ... } from 'fielder/preact';

Set up a form

Use the useForm hook to create a form.

const myForm = useForm();

return <FielderProvider value={myForm}>{children}</FielderProvider>;

Create some fields

Use the useField hook to create a field.

const [usernameProps, usernameMeta] = useField({
  name: 'username',
  initialValue: '',
  validate: useCallback(({ value }) => {
    if (!value) {
      throw Error('Username is required!');
  }, []),

return (
    <input type="text" {...usernameProps} />

Additional info

Once you're all set up, be sure to check out the guides for a deeper dive!

Additional resources

For more info, tutorials and examples, visit the official docs site!

Also check out: