form-mate.dev valid

Form Mate [](https://www.npmjs.com/package/form-mate) [![tests](https://github.com/franciscop/form-mate/workflow

Still aliased as `import { FormError } from 'form-mate'`, but the `<Form.Error>` way is recommended now.

For agents: Form Mate: a small npm library for forms, with Form.Error component guidance. Excerpt is thin; documentation covers usage of FormError.

form libraryform validationnpm packagereact formsform errors

Their llms.txt

The beginning of the file, from our validated copy saved 2026-10-25T01:07:14.680Z. Cached copy · Source on form-mate.dev

# Form Mate [![npm install form-mate](https://img.shields.io/badge/npm%20install-form--mate-blue.svg)](https://www.npmjs.com/package/form-mate) [![tests](https://github.com/franciscop/form-mate/workflows/tests/badge.svg)](https://github.com/franciscop/form-mate/actions) [![gzip size](https://img.badgesize.io/franciscop/form-mate/master/index.min.js.svg?label=gzip&logo=&compression=gzip)](https://github.com/franciscop/form-mate/blob/master/index.min.js)

A tiny and elegant library to handle forms with React:

```js
import Form from "form-mate";

// { fullname: "Francisco", email: "xxxxxx@francisco.io" }
export default () => (
  <Form onSubmit={(data) => console.log(data)}>
    <input name="fullname" required />
    <input name="email" type="email" required />
    <button>Subscribe!</button>
  </Form>
);
```

Benefits over a plain `<form>`:

- Parse the form fields into an object for easy access and consumption. For example, for a form on a TODO list: `onSubmit(newItem => setItems([...items, newItem]))`.
- Disable the form while it's submitting to avoid double-submit.
- Prop [`onError`](#onerror) for easy error handling, integrates well with other options.
- Prop [`onChange`](#onchange) to listen to the form changes as they happen.
- Prop [`autoReset`](#autoreset) to clear the form after `onSubmit` finishes successfully.
- Prop [`encType`](#enctype) (like `encType="multipart/form-data"`) for file handling. It makes the callback receive an instance of `FormData` instead of a plain object. This makes it easy to submit files with `fetch()`, Axios, etc.
- Sub Component `<Form.Error />` for more advanced error management.
- Sub Component `<Form.Loading />` for more advanced loading state handling.

## Getting Started

Install `form-mate` with npm:

```
npm install form-mate
```

Import it and use it anywhere in your React project:

```js
import Form from "form-mate";

export default () => (
  <Form onSubmit={(data) => console.log(data)} autoReset>
    {/* ... */}
  </Form>
);
```

## API

### onSubmit

Mandatory prop that accepts a sync or `async` callback. It will receive the values in the form when submitted:

```js
import Form from "form-mate";

export default function Subscribe() {
  return (
    <Form onSubmit={(data) => console.log(data)}>
…

Related sites

Explore similar publishers →

Similar publisher descriptions and documentation. Similarity does not imply affiliation or equivalent capabilities.

Machine-readable: GET /v1/resolve?q=form-mate.dev · GET /v1/domain/form-mate.dev · this page as Accept: application/json or text/markdown · MCP lookup_domain

Automatically discovered from public files. Inclusion does not imply endorsement or publisher participation.

Claim my listing on Agent Web Map for form-mate.dev:
1. POST https://agentwebmap.com/v1/sites/form-mate.dev/claims and keep claim_id and claim_secret private.
2. Publish the verification line "AgentWebMap verification: <token>" (token from step 1) in https://form-mate.dev/llms.txt, or use the DNS, meta-tag or well-known method the response describes. This only verifies the listing; your website and domain remain yours.
3. POST https://agentwebmap.com/v1/sites/form-mate.dev/verify with {"claim_id": "...", "claim_secret": "..."}.
4. Save the api_key from the answer; it manages the listing (PATCH https://agentwebmap.com/v1/sites/form-mate.dev).
MCP equivalent: tools begin_ownership_claim, then verify_domain, at https://agentwebmap.com/mcp. Docs: https://agentwebmap.com/docs#verify

Corrections or removal requests: contact the directory.