Skip to content
Form library implemented with Hooks.
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update issue templates Jan 14, 2019
__tests__ chore: remove arrays May 21, 2019
scripts slicing May 5, 2019
src refactor: cut bundle size in Form May 23, 2019
website refactor: field golfing Apr 28, 2019
.all-contributorsrc docs: update .all-contributorsrc Feb 28, 2019
.editorconfig init Nov 16, 2018
.travis.yml feat: getting the tests to work May 5, 2019 chore: update changelog May 10, 2019 Create Feb 3, 2019
LICENSE init Nov 16, 2018 basic example Apr 13, 2019
package.json chore: update deps May 20, 2019
rollup.config.js chore: make use of ADVANCED_MODE May 9, 2019
tsconfig.json chore: optimise toPath May 23, 2019
tslint.json chore: optimise toPath May 23, 2019
yarn.lock chore: update deps May 20, 2019


All Contributors npm version Build Status Bundle size codecov

This form library was made only with functional components, making the initial goal of having reduced bundle size easier to achieve.

I hope to make libraries like these a more recurring theme, since focussing on reduced bundle size isn't only the concern of the application developer. It is also a commitment that should be made by library authors.






  yarn add hooked-form


  npm i --save hooked-form



<script src=""></script>


<script src=""></script>


import React from 'react';
import { Form, Field } from 'hooked-form';

const StringField = ({ value, label, onChange, onFocus, onBlur, type, error, touched }) => {
  const onInput = React.useCallback((e) => onChange(e.currentTarget.value), [onChange]);
  return (
      {label + ' '}
      <input value={value} onChange={onInput} onBlur={onBlur} onFocus={onFocus} type={type} />
      {touched && error && <div>{error}</div>}

const HookedForm = () => (
    <h3>Hooked Form</h3>
    <Field label="Name:" component={StringField} fieldId="name" />
    <input type="submit" value="Submit" />

export default Form({
  onSubmit: console.log,
  validateOnBlur: true,
  validateOnChange: true,
  mapPropsToValues: () => ({ name: '' }),
  validate: (values) => {
    const errors = {};
    if (! = 'Required';
    return errors;

Modern build

This library offers a modern build (ES2015 output), this is smaller and parses faster in the browser. So if you don't plan to target older browsers feel free to use this.


  "resolve": {
    "alias": {
      "hooked-form": "hooked-form/dist/hooked-form.modern.js"


  "alias": {
    "hooked-form": "hooked-form/dist/hooked-form.modern.js"


  • When initially submitting my form shows no errors?

    onSubmit your values get traversed however if the application doesn't know what your values are it can't set anything as touched. This can be solved with passing mapPropsToValues or initialValues.



Thanks goes to these wonderful people (emoji key):

Jovi De Croock
Jovi De Croock

🚇 ⚠️ 👀 📖 💻
Laurens Lavaert
Laurens Lavaert


This project follows the all-contributors specification. Contributions of any kind welcome!

You can’t perform that action at this time.