A field-first form library for React and React Native

Usage no npm install needed!

<script type="module">
  import fielder from '';


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: