Skip to content
Forms library for react
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.
docs add visual example Jan 22, 2016
src Extra semicolon semi lint. Sep 5, 2018
.eslintrc add eslint-config-airbnb Nov 22, 2015
.travis.yml Replace with (#358) Sep 2, 2016 Add `getTcombFormOptions` to (#377) Feb 12, 2017 add hint Feb 24, 2016
LICENSE docs: add Notice Mar 15, 2018
karma.conf.js Internal: fix travis Mar 15, 2018
package.json bump version Sep 5, 2018
webpack.dist.config.js add dist configuration for npmcdn Jan 21, 2016

build status dependency status npm downloads

"Simplicity is the ultimate sophistication" (Leonardo da Vinci)


tcomb-form is looking for maintainers. If you're interested in helping a great way to get started would just be to start weighing-in on GitHub issues, reviewing and testing some PRs.

Domain Driven Forms

The tcomb library provides a concise but expressive way to define domain models in JavaScript.

The tcomb-validation library builds on tcomb, providing validation functions for tcomb domain models.

This library builds on those two and realizes an old dream of mine.


This playground, while a bit outdated, gives you the general idea.


With tcomb-form you simply call <Form type={Model} /> to generate a form based on that domain model. What does this get you?

  1. Write a lot less HTML
  2. Usability and accessibility for free (automatic labels, inline validation, etc)
  3. No need to update forms when domain model changes


  • tcomb-forms lets you override automatic features or add additional information to forms.
  • You often don't want to use your domain model directly for a form. You can easily create a form specific model with tcomb that captures the details of a particular feature, and then define a function that uses that model to process the main domain model.


import t from 'tcomb-form'

const FormSchema = t.struct({
  name: t.String,         // a required string
  age: t.maybe(t.Number), // an optional number
  rememberMe: t.Boolean   // a boolean

const App = React.createClass({

  onSubmit(evt) {
    const value = this.refs.form.getValue()
    if (value) {

  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <t.form.Form ref="form" type={FormSchema} />
        <div className="form-group">
          <button type="submit" className="btn btn-primary">Save</button>


Output. Labels are automatically generated.


Browser compatibility: same as React >=0.13.0


Thanks so much to Chris Pearce for pointing me in the right direction and for supporting me in the v0.4 rewrite.

Special thanks to William Lubelski (@uiwill), without him this library would be less magic.

Thanks to Esa-Matti Suuronen for the excellent humanize() function.

Thanks to Andrey Popp for writing react-forms, great inspiration for list management.


You can’t perform that action at this time.