When I migrated my universal app (browser + node) to React 15 I've noticed that I have 2 react versions in my webpack bundle.
Appeared that this package has "react": "^0.14.0" as its dep.
I tried to change it to ^0.14.0 || ^15.0.0 and everything seemed fine except this "attempted to reuse markup" error:

warning.js:44 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) put type="password" id="0" name="current
 (server) put type="password" name="currentPasswor

Looks like this package adds some id's to form fields on client but doesn't do it on server.
And also I think react dep should be under peerDependencies to throw an error in such situations. As I can see you've already done it for tcomb-form.

Thanks!

I noticed that the create function is not being exported from the file. That makes it impossible to use the overrides facility of this function. Just for the sake of extensibility, can you import this function as well? Thanks.

When rendering a checkbox with horizontal configuration, and the column widths for a non-mobile breakpoint do not sum to 12, the checkbox is offset in a weird position.

I would expect the position of the checkboxes to be aligned with the form inputs. Less ideally, the requirement to have 2 columns that sum to 12 could be documented in the Guide.

Example component:

import React, { Component } from 'react';
import t from 'tcomb-form'
import 'bootstrap/dist/css/bootstrap.min.css'

const FormSchema = t.struct({
  name: t.String,
  age: t.maybe(t.Number),
  rememberMe: t.Boolean
})

const options = {
  config: {
    horizontal: {
      md: [1, 6],
      sm: [1, 8]
    },
  }
};

class MyForm extends Component {
  render() {
    return (
      <form onSubmit={this.onSubmit} className="tcomb-form form-horizontal label-left">
        <t.form.Form ref="form" type={type} options={options} />
        <div className="form-group">
          <button type="submit" className="btn btn-primary">Save</button>
        </div>
      </form>
    );
  }
}

Result:

I can prepare a fix, but at a glance it will require quite a bit of refactoring to Breakpoints.js.

Could be great to think about Bootstrap 4 implementation, the current version is not working well with Bootstrap 4.

Example: On error form field (highlighted in red)

Before (BS3)

<div class="form-group has-error">
    <label class="control-label" for="inputError1">Input with error</label>
    <input type="text" class="form-control" id="inputError1">
</div>

After (BS4)

<div class="form-group has-danger">
    <label class="form-control-label" for="inputDanger1">Input with danger</label>
    <input type="text" class="form-control form-control-danger" id="inputDanger1">
    <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
</div>

Differences:

• Use of has-danger class instead of has-error on form-group (turns label in red)
• Input is red because of the form-control-danger class on it
• form-control-feedback class for error message under the input