From a88606ccb1b4ed9a391a8e1ee52c08c5f0f478db Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Fri, 25 Mar 2016 17:01:23 +0100
Subject: [PATCH 01/19] WiP: Moving to bootstrap.

---
 playground/styles.css                    | 47 ----------------------
 src/components/ErrorList.js              | 14 +++++--
 src/components/Form.js                   |  5 ++-
 src/components/fields/ArrayField.js      | 36 ++++++++++-------
 src/components/fields/SchemaField.js     | 50 +++++++++++++-----------
 src/components/widgets/CheckboxWidget.js | 18 ++++++---
 src/components/widgets/PasswordWidget.js |  1 +
 src/components/widgets/RadioWidget.js    | 20 +++++-----
 src/components/widgets/SelectWidget.js   |  1 +
 src/components/widgets/TextWidget.js     |  1 +
 src/components/widgets/TextareaWidget.js |  1 +
 src/components/widgets/UpDownWidget.js   |  1 +
 test/ArrayField_test.js                  |  2 +-
 test/BooleanField_test.js                |  2 +-
 test/NumberField_test.js                 |  4 +-
 test/ObjectField_test.js                 |  2 +-
 test/StringField_test.js                 |  4 +-
 17 files changed, 97 insertions(+), 112 deletions(-)

diff --git a/playground/styles.css b/playground/styles.css
index f392df22cc..e69de29bb2 100644
--- a/playground/styles.css
+++ b/playground/styles.css
@@ -1,47 +0,0 @@
-.rjsf label {
-  width: 200px;
-}
-
-.rjsf input[type=text],
-.rjsf input[type=number],
-.rjsf input[type=password],
-.rjsf input[type=range],
-.rjsf textarea,
-.rjsf select {
-  font-weight: normal;
-  width: 320px;
-}
-
-.rjsf textarea {
-  height: 120px;
-}
-
-.rjsf input[type=radio] {
-  margin-right: .4em;
-}
-
-.invalid {
-  color: red;
-}
-
-.valid {
-  color: green;
-}
-
-.rjsf .geo input {
-  width: 160px;
-  margin-left: 4px;
-}
-
-.rjsf .field-error input[type=text],
-.rjsf .field-error select {
-  background-color: pink;
-}
-
-.rjsf .field-error .error-detail {
-  color: red;
-}
-
-.rjsf .errors {
-  color: red;
-}
diff --git a/src/components/ErrorList.js b/src/components/ErrorList.js
index 96b36f6efb..ff15b1f65d 100644
--- a/src/components/ErrorList.js
+++ b/src/components/ErrorList.js
@@ -3,11 +3,17 @@ import React from "react";
 
 export default function ErrorList({errors}) {
   return (
-    <div className="errors">
-      <h2>Errors</h2>
-      <ul>{
+    <div className="panel panel-danger errors">
+      <div className="panel-heading">
+        <h3 className="panel-title">Errors</h3>
+      </div>
+      <ul className="list-group">{
         errors.map((error, i) => {
-          return <li key={i}>{error.stack}</li>;
+          return (
+            <li key={i} className="list-group-item text-danger">{
+              error.stack
+            }</li>
+          );
         })
       }</ul>
     </div>
diff --git a/src/components/Form.js b/src/components/Form.js
index b68b5cf2cd..d491aba4fe 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -118,7 +118,10 @@ export default class Form extends Component {
           formData={formData}
           onChange={this._onChange}
           registry={registry}/>
-        { children ? children : <p><button type="submit">Submit</button></p> }
+        { children ? children :
+          <p>
+            <button type="submit" className="btn btn-info">Submit</button>
+          </p> }
       </form>
     );
   }
diff --git a/src/components/fields/ArrayField.js b/src/components/fields/ArrayField.js
index fd5b464eea..25c35a557b 100644
--- a/src/components/fields/ArrayField.js
+++ b/src/components/fields/ArrayField.js
@@ -113,29 +113,35 @@ class ArrayField extends Component {
         {title ? <legend>{title}</legend> : null}
         {schema.description ?
           <div className="field-description">{schema.description}</div> : null}
-        <div className="array-item-list">{
+        <div className="row array-item-list">{
           items.map((item, index) => {
             const itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
             return (
               <div key={index}>
-                <SchemaField
-                  schema={itemsSchema}
-                  uiSchema={uiSchema.items}
-                  formData={items[index]}
-                  errorSchema={itemErrorSchema}
-                  required={this.isItemRequired(itemsSchema)}
-                  onChange={this._onChangeForIndex(index)}
-                  registry={this.props.registry}/>
-                <p className="array-item-remove">
-                  <button type="button"
-                    onClick={this._onDropIndexClick(index)}>-</button></p>
+                <div className="col-xs-10">
+                  <SchemaField
+                    schema={itemsSchema}
+                    uiSchema={uiSchema.items}
+                    formData={items[index]}
+                    errorSchema={itemErrorSchema}
+                    required={this.isItemRequired(itemsSchema)}
+                    onChange={this._onChangeForIndex(index)}
+                    registry={this.props.registry}/>
+                </div>
+                <div className="col-xs-2 array-item-remove text-right">
+                  <button type="button" className="btn btn-danger"
+                    onClick={this._onDropIndexClick(index)}>Delete</button>
+                </div>
               </div>
             );
           })
         }</div>
-        <p className="array-item-add">
-          <button type="button" onClick={this._onAddClick}>+</button>
-        </p>
+        <div className="row">
+          <p className="col-xs-2 col-xs-offset-10 array-item-add text-right">
+            <button type="button" className="btn btn-info"
+              onClick={this._onAddClick}>Add</button>
+          </p>
+        </div>
       </fieldset>
     );
   }
diff --git a/src/components/fields/SchemaField.js b/src/components/fields/SchemaField.js
index 521612ebc8..ba4f173bb0 100644
--- a/src/components/fields/SchemaField.js
+++ b/src/components/fields/SchemaField.js
@@ -40,42 +40,45 @@ function getLabel(label, required) {
   return label;
 }
 
-function getContent({type, label, required, children, displayLabel}) {
-  if (!displayLabel) {
-    return children;
-  }
-
-  return (
-    <label>
-      {getLabel(label, required)}
-      {children}
-    </label>
-  );
-}
-
 function ErrorList({errors}) {
   return (
-    <ul className="error-detail">{
-      (errors || []).map((error, index) => {
-        return <li key={index}>{error}</li>;
-      })
-    }</ul>
+    <div>
+      <p/>
+      <ul className="error-detail bs-callout bs-callout-info">{
+        (errors || []).map((error, index) => {
+          return <li className="text-danger" key={index}>{error}</li>;
+        })
+      }</ul>
+    </div>
   );
 }
 
-function Wrapper(props) {
-  const {type, classNames, errorSchema} = props;
+function Wrapper({
+    type,
+    classNames,
+    errorSchema,
+    label,
+    required,
+    widget,
+    displayLabel,
+    children
+  }) {
   const {errors} = errorSchema;
   const isError = errors && errors.length > 0;
   const classList = [
+    "form-group",
     "field",
     `field-${type}`,
-    isError ? "field-error" : "",
+    isError ? "field-error has-error" : "",
     classNames,
   ].join(" ").trim();
+  // XXX detect widget name?
   return (
     <div className={classList}>
-      {getContent(props)}
+      {displayLabel && label ? <label className="control-label">
+                                 {getLabel(label, required)}
+                               </label> : null}
+      {children}
       {isError ? <ErrorList errors={errors} /> : <div/>}
     </div>
   );
@@ -84,11 +87,12 @@ function Wrapper(props) {
 if (process.env.NODE_ENV !== "production") {
   Wrapper.propTypes = {
     type: PropTypes.string.isRequired,
+    classNames: React.PropTypes.string,
     label: PropTypes.string,
     required: PropTypes.bool,
     displayLabel: PropTypes.bool,
+    widget: PropTypes.any, // XXX non
     children: React.PropTypes.node.isRequired,
-    classNames: React.PropTypes.string,
   };
 }
 
diff --git a/src/components/widgets/CheckboxWidget.js b/src/components/widgets/CheckboxWidget.js
index 64520ceff2..86a2530aa5 100644
--- a/src/components/widgets/CheckboxWidget.js
+++ b/src/components/widgets/CheckboxWidget.js
@@ -8,14 +8,20 @@ function CheckboxWidget({
   required,
   placeholder,
   onChange,
+  label,
 }) {
   return (
-    <input type="checkbox"
-      title={placeholder}
-      checked={value}
-      defaultChecked={defaultValue}
-      required={required}
-      onChange={(event) => onChange(event.target.checked)} />
+    <div className="checkbox">
+      <label>
+        <input type="checkbox"
+          title={placeholder}
+          checked={value}
+          defaultChecked={defaultValue}
+          required={required}
+          onChange={(event) => onChange(event.target.checked)} />
+        {label}
+      </label>
+    </div>
   );
 }
 if (process.env.NODE_ENV !== "production") {
diff --git a/src/components/widgets/PasswordWidget.js b/src/components/widgets/PasswordWidget.js
index 3e72bf4457..4f1c166515 100644
--- a/src/components/widgets/PasswordWidget.js
+++ b/src/components/widgets/PasswordWidget.js
@@ -11,6 +11,7 @@ function PasswordWidget({
 }) {
   return (
     <input type="password"
+      className="form-control"
       value={value}
       defaultValue={defaultValue}
       placeholder={placeholder}
diff --git a/src/components/widgets/RadioWidget.js b/src/components/widgets/RadioWidget.js
index b3f396952f..7530a99858 100644
--- a/src/components/widgets/RadioWidget.js
+++ b/src/components/widgets/RadioWidget.js
@@ -18,15 +18,17 @@ function RadioWidget({
         const checked = value !== undefined ? option.value === value :
                                               option.value === defaultValue;
         return (
-          <label key={i}>
-            <input type="radio"
-              name={name}
-              value={option.value}
-              checked={checked}
-              placeholder={placeholder}
-              onChange={_ => onChange(option.value)} />
-            {option.label}
-          </label>
+          <div className="radio">
+            <label key={i}>
+              <input type="radio"
+                name={name}
+                value={option.value}
+                checked={checked}
+                placeholder={placeholder}
+                onChange={_ => onChange(option.value)} />
+              {option.label}
+            </label>
+          </div>
         );
       })
     }</div>
diff --git a/src/components/widgets/SelectWidget.js b/src/components/widgets/SelectWidget.js
index 1560e268a3..0a44b2a5f2 100644
--- a/src/components/widgets/SelectWidget.js
+++ b/src/components/widgets/SelectWidget.js
@@ -29,6 +29,7 @@ function SelectWidget({
   return (
     <select
       multiple={multiple}
+      className="form-control"
       title={placeholder}
       value={value}
       defaultValue={defaultValue}
diff --git a/src/components/widgets/TextWidget.js b/src/components/widgets/TextWidget.js
index 9230db41e0..7c7902bd30 100644
--- a/src/components/widgets/TextWidget.js
+++ b/src/components/widgets/TextWidget.js
@@ -11,6 +11,7 @@ function TextWidget({
 }) {
   return (
     <input type="text"
+      className="form-control"
       value={value}
       defaultValue={defaultValue}
       placeholder={placeholder}
diff --git a/src/components/widgets/TextareaWidget.js b/src/components/widgets/TextareaWidget.js
index 1364de144e..658b7fe4c3 100644
--- a/src/components/widgets/TextareaWidget.js
+++ b/src/components/widgets/TextareaWidget.js
@@ -11,6 +11,7 @@ function TextWidget({
 }) {
   return (
     <textarea
+      className="form-control"
       value={value}
       defaultValue={defaultValue}
       placeholder={placeholder}
diff --git a/src/components/widgets/UpDownWidget.js b/src/components/widgets/UpDownWidget.js
index 7ff8a32e1e..4ee5d41b8b 100644
--- a/src/components/widgets/UpDownWidget.js
+++ b/src/components/widgets/UpDownWidget.js
@@ -25,6 +25,7 @@ function UpDownWidget({
 }) {
   return (
     <input type="number"
+      className="form-control"
       value={value}
       defaultValue={defaultValue}
       placeholder={placeholder}
diff --git a/test/ArrayField_test.js b/test/ArrayField_test.js
index 2493d6cd5a..1054e60fdd 100644
--- a/test/ArrayField_test.js
+++ b/test/ArrayField_test.js
@@ -91,7 +91,7 @@ describe("ArrayField", () => {
     it("should render a select widget with a label", () => {
       const {node} = createFormComponent({schema});
 
-      expect(node.querySelector(".field label > span").textContent)
+      expect(node.querySelector(".field label").textContent)
         .eql("My field");
     });
 
diff --git a/test/BooleanField_test.js b/test/BooleanField_test.js
index 6aa319ac6f..0db6d25ee9 100644
--- a/test/BooleanField_test.js
+++ b/test/BooleanField_test.js
@@ -19,7 +19,7 @@ describe("BooleanField", () => {
       title: "foo"
     }});
 
-    expect(node.querySelector(".field label > span").textContent)
+    expect(node.querySelector(".field label").textContent)
       .eql("foo");
   });
 
diff --git a/test/NumberField_test.js b/test/NumberField_test.js
index 7468530785..509f0fa6f1 100644
--- a/test/NumberField_test.js
+++ b/test/NumberField_test.js
@@ -20,7 +20,7 @@ describe("NumberField", () => {
         title: "foo"
       }});
 
-      expect(node.querySelector(".field label > span").textContent)
+      expect(node.querySelector(".field label").textContent)
         .eql("foo");
     });
 
@@ -96,7 +96,7 @@ describe("NumberField", () => {
         title: "foo",
       }});
 
-      expect(node.querySelector(".field label > span").textContent)
+      expect(node.querySelector(".field label").textContent)
         .eql("foo");
     });
 
diff --git a/test/ObjectField_test.js b/test/ObjectField_test.js
index f428cbf265..55bf38b1bb 100644
--- a/test/ObjectField_test.js
+++ b/test/ObjectField_test.js
@@ -50,7 +50,7 @@ describe("ObjectField", () => {
     it("should render a default property label", () => {
       const {node} = createFormComponent({schema});
 
-      expect(node.querySelector(".field-boolean label > span").textContent)
+      expect(node.querySelector(".field-boolean label").textContent)
         .eql("bar");
     });
 
diff --git a/test/StringField_test.js b/test/StringField_test.js
index 9c7bab55b4..224d8acf8c 100644
--- a/test/StringField_test.js
+++ b/test/StringField_test.js
@@ -20,7 +20,7 @@ describe("StringField", () => {
         title: "foo"
       }});
 
-      expect(node.querySelector(".field label > span").textContent)
+      expect(node.querySelector(".field label").textContent)
         .eql("foo");
     });
 
@@ -84,7 +84,7 @@ describe("StringField", () => {
         title: "foo",
       }});
 
-      expect(node.querySelector(".field label > span").textContent)
+      expect(node.querySelector(".field label").textContent)
         .eql("foo");
     });
 

From 9ec90cffe6d0cea4bf45ed468f369a1e839e2bae Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Sat, 26 Mar 2016 09:49:12 +0100
Subject: [PATCH 02/19] Improved styling of playground editors.

---
 playground/app.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/playground/app.js b/playground/app.js
index 1e0b18606f..e4fdbddc4f 100644
--- a/playground/app.js
+++ b/playground/app.js
@@ -94,17 +94,17 @@ class Editor extends Component {
     const icon = this.state.valid ? "ok" : "remove";
     const cls = this.state.valid ? "valid" : "invalid";
     return (
-      <fieldset>
-        <legend>
+      <div className="panel panel-default">
+        <div className="panel-heading">
           <span className={`${cls} glyphicon glyphicon-${icon}`} />
           {" "}
           {title}
-        </legend>
+        </div>
         <Codemirror
           value={this.state.code}
           onChange={this._onCodeChange}
           options={cmOptions} />
-      </fieldset>
+      </div>
     );
   }
 }

From 1a1b0723f7abf162e6bd846f09cbbddab55733a6 Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Sat, 26 Mar 2016 10:06:41 +0100
Subject: [PATCH 03/19] Updated eslit deps.

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 9222d236d5..00d96197ae 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
   "devDependencies": {
     "babel-cli": "^6.6.5",
     "babel-core": "^6.7.4",
-    "babel-eslint": "^5.0.0",
+    "babel-eslint": "^6.0.0",
     "babel-loader": "^6.2.4",
     "babel-plugin-react-transform": "^2.0.2",
     "babel-plugin-transform-class-properties": "^6.6.0",
@@ -47,7 +47,7 @@
     "chai": "^3.3.0",
     "codemirror": "^5.13.2",
     "css-loader": "^0.23.1",
-    "eslint": "^2.4.0",
+    "eslint": "^2.5.1",
     "eslint-plugin-react": "^4.2.3",
     "estraverse": "^4.2.0",
     "estraverse-fb": "^1.3.1",

From 9c4faeec60a15f1ed44b3ce1c0b446ff9a5148a2 Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Sun, 27 Mar 2016 11:08:16 +0200
Subject: [PATCH 04/19] Added a simple bootswatch style selector.

---
 playground/app.js                   | 96 ++++++++++++++++++++++++++++-
 playground/index.html               |  2 +-
 src/components/fields/ArrayField.js |  4 +-
 3 files changed, 97 insertions(+), 5 deletions(-)

diff --git a/playground/app.js b/playground/app.js
index e4fdbddc4f..fa220fe924 100644
--- a/playground/app.js
+++ b/playground/app.js
@@ -27,6 +27,65 @@ const cmOptions = {
   indentWithTabs: false,
   tabSize: 2,
 };
+const themes = {
+  default: {
+    stylesheet: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
+  },
+  cerulean: {
+    stylesheet: "http://bootswatch.com/cerulean/bootstrap.min.css"
+  },
+  cosmo: {
+    stylesheet: "http://bootswatch.com/cosmo/bootstrap.min.css"
+  },
+  cyborg: {
+    stylesheet: "http://bootswatch.com/cyborg/bootstrap.min.css"
+  },
+  darkly: {
+    stylesheet: "http://bootswatch.com/darkly/bootstrap.min.css"
+  },
+  flatly: {
+    stylesheet: "http://bootswatch.com/flatly/bootstrap.min.css"
+  },
+  journal: {
+    stylesheet: "http://bootswatch.com/journal/bootstrap.min.css"
+  },
+  lumen: {
+    stylesheet: "http://bootswatch.com/lumen/bootstrap.min.css"
+  },
+  paper: {
+    stylesheet: "http://bootswatch.com/paper/bootstrap.min.css"
+  },
+  readable: {
+    stylesheet: "http://bootswatch.com/readable/bootstrap.min.css"
+  },
+  sandstone: {
+    stylesheet: "http://bootswatch.com/sandstone/bootstrap.min.css"
+  },
+  simplex: {
+    stylesheet: "http://bootswatch.com/simplex/bootstrap.min.css"
+  },
+  slate: {
+    stylesheet: "http://bootswatch.com/slate/bootstrap.min.css"
+  },
+  spacelab: {
+    stylesheet: "http://bootswatch.com/spacelab/bootstrap.min.css"
+  },
+  "solarized-dark": {
+    stylesheet: "https://cdn.rawgit.com/aalpern/bootstrap-solarized/master/bootstrap-solarized-dark.css",
+  },
+  "solarized-light": {
+    stylesheet: "https://cdn.rawgit.com/aalpern/bootstrap-solarized/master/bootstrap-solarized-light.css",
+  },
+  superhero: {
+    stylesheet: "http://bootswatch.com/superhero/bootstrap.min.css"
+  },
+  united: {
+    stylesheet: "http://bootswatch.com/united/bootstrap.min.css"
+  },
+  yeti: {
+    stylesheet: "http://bootswatch.com/yeti/bootstrap.min.css"
+  },
+};
 
 class GeoPosition extends Component {
   constructor(props) {
@@ -146,13 +205,33 @@ class Selector extends Component {
   }
 }
 
+function ThemeSelector({theme, select}) {
+  const themeSchema = {
+    type: "string",
+    enum: Object.keys(themes)
+  };
+  return (
+    <Form schema={themeSchema}
+          formData={theme}
+          onChange={({formData}) => select(themes[formData])}>
+      <div/>
+    </Form>
+  );
+}
+
 class App extends Component {
   constructor(props) {
     super(props);
-    this.state = {form: false, schema: {}, uiSchema: {}, formData: {}};
+    this.state = {
+      form: false,
+      schema: {},
+      uiSchema: {},
+      formData: {},
+    };
     this._onSchemaChange = this.onSchemaChange.bind(this);
     this._onUISchemaChange = this.onUISchemaChange.bind(this);
     this._onFormDataChange = this.onFormDataChange.bind(this);
+    this._onThemeSelected = this.onThemeSelected.bind(this);
   }
 
   componentDidMount() {
@@ -181,12 +260,25 @@ class App extends Component {
     this.setState({formData});
   }
 
+  onThemeSelected(theme) {
+    document.getElementById("theme")
+      .setAttribute("href", theme.stylesheet);
+  }
+
   render() {
     return (
       <div className="container-fluid">
         <div className="page-header">
           <h1>react-jsonschema-form</h1>
-          <Selector onSelected={this.load.bind(this)} />
+          <div className="row">
+            <div className="col-sm-10">
+              <Selector onSelected={this.load.bind(this)} />
+            </div>
+            <div className="col-sm-2">
+              <ThemeSelector theme={this.state.theme}
+                             select={this._onThemeSelected} />
+            </div>
+          </div>
         </div>
         <div className="col-sm-6">
           <Editor title="JSONSchema"
diff --git a/playground/index.html b/playground/index.html
index 6cf3415683..68c028ee10 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -5,7 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>react-jsonschema-form playground</title>
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+  <link rel="stylesheet" id="theme" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 </head>
 <body>
   <div id="app"></div>
diff --git a/src/components/fields/ArrayField.js b/src/components/fields/ArrayField.js
index 25c35a557b..c14e13bf8a 100644
--- a/src/components/fields/ArrayField.js
+++ b/src/components/fields/ArrayField.js
@@ -129,7 +129,7 @@ class ArrayField extends Component {
                     registry={this.props.registry}/>
                 </div>
                 <div className="col-xs-2 array-item-remove text-right">
-                  <button type="button" className="btn btn-danger"
+                  <button type="button" className="btn btn-danger col-xs-12"
                     onClick={this._onDropIndexClick(index)}>Delete</button>
                 </div>
               </div>
@@ -138,7 +138,7 @@ class ArrayField extends Component {
         }</div>
         <div className="row">
           <p className="col-xs-2 col-xs-offset-10 array-item-add text-right">
-            <button type="button" className="btn btn-info"
+            <button type="button" className="btn btn-info col-xs-12"
               onClick={this._onAddClick}>Add</button>
           </p>
         </div>

From a5c808fcd94ee4d34b7e813b3961f651bbeb9ff5 Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Sun, 27 Mar 2016 13:53:31 +0200
Subject: [PATCH 05/19] Custom editor theme along page ones.

---
 playground/app.js | 56 +++++++++++++++++++++++++++++++++--------------
 1 file changed, 40 insertions(+), 16 deletions(-)

diff --git a/playground/app.js b/playground/app.js
index fa220fe924..691a457d9c 100644
--- a/playground/app.js
+++ b/playground/app.js
@@ -8,6 +8,13 @@ import { samples } from "./samples";
 import Form from "../src";
 
 import "codemirror/lib/codemirror.css";
+import "codemirror/theme/dracula.css";
+import "codemirror/theme/blackboard.css";
+import "codemirror/theme/mbo.css";
+import "codemirror/theme/ttcn.css";
+import "codemirror/theme/solarized.css";
+import "codemirror/theme/monokai.css";
+import "codemirror/theme/eclipse.css";
 import "./styles.css";
 
 const log = (type) => console.log.bind(console, type);
@@ -38,13 +45,16 @@ const themes = {
     stylesheet: "http://bootswatch.com/cosmo/bootstrap.min.css"
   },
   cyborg: {
-    stylesheet: "http://bootswatch.com/cyborg/bootstrap.min.css"
+    stylesheet: "http://bootswatch.com/cyborg/bootstrap.min.css",
+    editor: "blackboard",
   },
   darkly: {
-    stylesheet: "http://bootswatch.com/darkly/bootstrap.min.css"
+    stylesheet: "http://bootswatch.com/darkly/bootstrap.min.css",
+    editor: "mbo",
   },
   flatly: {
-    stylesheet: "http://bootswatch.com/flatly/bootstrap.min.css"
+    stylesheet: "http://bootswatch.com/flatly/bootstrap.min.css",
+    editor: "ttcn",
   },
   journal: {
     stylesheet: "http://bootswatch.com/journal/bootstrap.min.css"
@@ -59,31 +69,38 @@ const themes = {
     stylesheet: "http://bootswatch.com/readable/bootstrap.min.css"
   },
   sandstone: {
-    stylesheet: "http://bootswatch.com/sandstone/bootstrap.min.css"
+    stylesheet: "http://bootswatch.com/sandstone/bootstrap.min.css",
+    editor: "solarized",
   },
   simplex: {
-    stylesheet: "http://bootswatch.com/simplex/bootstrap.min.css"
+    stylesheet: "http://bootswatch.com/simplex/bootstrap.min.css",
+    editor: "ttcn",
   },
   slate: {
-    stylesheet: "http://bootswatch.com/slate/bootstrap.min.css"
+    stylesheet: "http://bootswatch.com/slate/bootstrap.min.css",
+    editor: "monokai",
   },
   spacelab: {
     stylesheet: "http://bootswatch.com/spacelab/bootstrap.min.css"
   },
   "solarized-dark": {
     stylesheet: "https://cdn.rawgit.com/aalpern/bootstrap-solarized/master/bootstrap-solarized-dark.css",
+    editor: "dracula",
   },
   "solarized-light": {
     stylesheet: "https://cdn.rawgit.com/aalpern/bootstrap-solarized/master/bootstrap-solarized-light.css",
+    editor: "solarized",
   },
   superhero: {
-    stylesheet: "http://bootswatch.com/superhero/bootstrap.min.css"
+    stylesheet: "http://bootswatch.com/superhero/bootstrap.min.css",
+    editor: "dracula",
   },
   united: {
     stylesheet: "http://bootswatch.com/united/bootstrap.min.css"
   },
   yeti: {
-    stylesheet: "http://bootswatch.com/yeti/bootstrap.min.css"
+    stylesheet: "http://bootswatch.com/yeti/bootstrap.min.css",
+    editor: "eclipse",
   },
 };
 
@@ -149,7 +166,7 @@ class Editor extends Component {
   }
 
   render() {
-    const {title} = this.props;
+    const {title, theme} = this.props;
     const icon = this.state.valid ? "ok" : "remove";
     const cls = this.state.valid ? "valid" : "invalid";
     return (
@@ -162,7 +179,7 @@ class Editor extends Component {
         <Codemirror
           value={this.state.code}
           onChange={this._onCodeChange}
-          options={cmOptions} />
+          options={Object.assign({}, cmOptions, {theme})} />
       </div>
     );
   }
@@ -213,7 +230,7 @@ function ThemeSelector({theme, select}) {
   return (
     <Form schema={themeSchema}
           formData={theme}
-          onChange={({formData}) => select(themes[formData])}>
+          onChange={({formData}) => select(formData, themes[formData])}>
       <div/>
     </Form>
   );
@@ -227,6 +244,8 @@ class App extends Component {
       schema: {},
       uiSchema: {},
       formData: {},
+      editor: "default",
+      theme: "default",
     };
     this._onSchemaChange = this.onSchemaChange.bind(this);
     this._onUISchemaChange = this.onUISchemaChange.bind(this);
@@ -260,12 +279,15 @@ class App extends Component {
     this.setState({formData});
   }
 
-  onThemeSelected(theme) {
-    document.getElementById("theme")
-      .setAttribute("href", theme.stylesheet);
+  onThemeSelected(theme, {stylesheet, editor}) {
+    // Side effect!
+    this.setState({theme, editor: editor ? editor : "default"}, _ => {
+      document.getElementById("theme").setAttribute("href", stylesheet);
+    });
   }
 
   render() {
+    const {theme} = this.state;
     return (
       <div className="container-fluid">
         <div className="page-header">
@@ -275,23 +297,25 @@ class App extends Component {
               <Selector onSelected={this.load.bind(this)} />
             </div>
             <div className="col-sm-2">
-              <ThemeSelector theme={this.state.theme}
-                             select={this._onThemeSelected} />
+              <ThemeSelector theme={theme} select={this._onThemeSelected} />
             </div>
           </div>
         </div>
         <div className="col-sm-6">
           <Editor title="JSONSchema"
+            theme={this.state.editor}
             code={toJson(this.state.schema)}
             onChange={this._onSchemaChange} />
           <div className="row">
             <div className="col-sm-6">
               <Editor title="UISchema"
+                theme={this.state.editor}
                 code={toJson(this.state.uiSchema)}
                 onChange={this._onUISchemaChange} />
             </div>
             <div className="col-sm-6">
               <Editor title="formData"
+                theme={this.state.editor}
                 code={toJson(this.state.formData)}
                 onChange={this._onFormDataChange} />
             </div>

From 7c9e2ff2dc1c3e2a44df136afca2f78fb30c3c51 Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Sun, 27 Mar 2016 14:30:33 +0200
Subject: [PATCH 06/19] Improved sample custom geo field.

---
 playground/app.js | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/playground/app.js b/playground/app.js
index 691a457d9c..a018db7e21 100644
--- a/playground/app.js
+++ b/playground/app.js
@@ -125,17 +125,19 @@ class GeoPosition extends Component {
         <h3>Hey, I'm a custom component</h3>
         <p>I'm registered as <code>geo</code> and referenced in
         <code>uiSchema</code> as the <code>ui:field</code> to use for this
-        shcema.</p>
-        <p>
-          <label>Lat
-            <input type="number" value={lat} step="0.00001"
+        schema.</p>
+        <div className="row">
+          <div className="col-sm-6">
+            <label>Latitude</label>
+            <input className="form-control" type="number" value={lat} step="0.00001"
               onChange={this.onChange("lat")} />
-          </label>
-          <label>Lon
-            <input type="number" value={lon} step="0.00001"
+          </div>
+          <div className="col-sm-6">
+            <label>Longitude</label>
+            <input className="form-control" type="number" value={lon} step="0.00001"
               onChange={this.onChange("lon")} />
-          </label>
-        </p>
+          </div>
+        </div>
       </div>
     );
   }

From 3c4f5f54007100fb49508e70ad68fee83d854955 Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Sun, 27 Mar 2016 18:45:57 +0200
Subject: [PATCH 07/19] Added autogenerated ids.

---
 src/components/Form.js                   | 13 +++-
 src/components/fields/ArrayField.js      | 15 ++++-
 src/components/fields/BooleanField.js    | 13 +++-
 src/components/fields/NumberField.js     |  1 +
 src/components/fields/ObjectField.js     |  6 +-
 src/components/fields/SchemaField.js     | 27 ++++----
 src/components/fields/StringField.js     | 13 +++-
 src/components/widgets/CheckboxWidget.js |  3 +
 src/components/widgets/PasswordWidget.js |  3 +
 src/components/widgets/RadioWidget.js    |  5 +-
 src/components/widgets/RangeWidget.js    |  3 +
 src/components/widgets/SelectWidget.js   |  3 +
 src/components/widgets/TextWidget.js     |  3 +
 src/components/widgets/TextareaWidget.js |  3 +
 src/components/widgets/UpDownWidget.js   |  3 +
 src/utils.js                             | 20 ++++++
 test/ArrayField_test.js                  | 18 ++++-
 test/BooleanField_test.js                |  9 +++
 test/Form_test.js                        |  1 -
 test/NumberField_test.js                 | 19 ++++++
 test/ObjectField_test.js                 | 21 +++++-
 test/StringField_test.js                 | 19 ++++++
 test/performance_test.js                 |  3 +
 test/utils_test.js                       | 83 +++++++++++++++++++++++-
 24 files changed, 280 insertions(+), 27 deletions(-)

diff --git a/src/components/Form.js b/src/components/Form.js
index d491aba4fe..0f162569fe 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -3,7 +3,12 @@ import { Validator } from "jsonschema";
 
 import SchemaField from "./fields/SchemaField";
 import TitleField from "./fields/TitleField";
-import { getDefaultFormState, shouldRender, toErrorSchema } from "../utils";
+import {
+  getDefaultFormState,
+  shouldRender,
+  toErrorSchema,
+  toIdSchema
+} from "../utils";
 import ErrorList from "./ErrorList";
 
 
@@ -31,7 +36,8 @@ export default class Form extends Component {
     const formData = getDefaultFormState(schema, props.formData, definitions) || null;
     const errors = edit ? this.validate(formData, schema) : [];
     const errorSchema = toErrorSchema(errors);
-    return {status: "initial", formData, edit, errors, errorSchema};
+    const idSchema = toIdSchema(schema, undefined, definitions);
+    return {status: "initial", formData, edit, errors, errorSchema, idSchema};
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -105,7 +111,7 @@ export default class Form extends Component {
 
   render() {
     const {children, schema, uiSchema} = this.props;
-    const {formData, errorSchema} = this.state;
+    const {formData, errorSchema, idSchema} = this.state;
     const registry = this.getRegistry();
     const _SchemaField = registry.fields.SchemaField;
     return (
@@ -115,6 +121,7 @@ export default class Form extends Component {
           schema={schema}
           uiSchema={uiSchema}
           errorSchema={errorSchema}
+          idSchema={idSchema}
           formData={formData}
           onChange={this._onChange}
           registry={registry}/>
diff --git a/src/components/fields/ArrayField.js b/src/components/fields/ArrayField.js
index c14e13bf8a..25741aba07 100644
--- a/src/components/fields/ArrayField.js
+++ b/src/components/fields/ArrayField.js
@@ -5,14 +5,20 @@ import {
   isMultiSelect,
   optionsList,
   retrieveSchema,
+  toIdSchema,
   shouldRender
 } from "../../utils";
 import SelectWidget from "./../widgets/SelectWidget";
 
 
+function itemIndexSchema(idSchema, index) {
+  return toIdSchema();
+}
+
 class ArrayField extends Component {
   static defaultProps = {
-    uiSchema: {}
+    uiSchema: {},
+    idSchema: {},
   };
 
   constructor(props) {
@@ -87,7 +93,7 @@ class ArrayField extends Component {
   }
 
   render() {
-    const {schema, uiSchema, errorSchema, name} = this.props;
+    const {schema, uiSchema, errorSchema, idSchema, name} = this.props;
     const title = schema.title || name;
     const {items} = this.state;
     const {fields, definitions} = this.props.registry;
@@ -96,6 +102,7 @@ class ArrayField extends Component {
     if (isMultiSelect(schema)) {
       return (
         <SelectWidget
+          id={idSchema && idSchema.id}
           multiple
           onChange={this._onSelectChange}
           options={optionsList(itemsSchema)}
@@ -116,6 +123,8 @@ class ArrayField extends Component {
         <div className="row array-item-list">{
           items.map((item, index) => {
             const itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
+            const itemIdPrefix = idSchema.id + "_" + index;
+            const itemIdSchema = toIdSchema(itemsSchema, itemIdPrefix, definitions);
             return (
               <div key={index}>
                 <div className="col-xs-10">
@@ -124,6 +133,7 @@ class ArrayField extends Component {
                     uiSchema={uiSchema.items}
                     formData={items[index]}
                     errorSchema={itemErrorSchema}
+                    idSchema={itemIdSchema}
                     required={this.isItemRequired(itemsSchema)}
                     onChange={this._onChangeForIndex(index)}
                     registry={this.props.registry}/>
@@ -151,6 +161,7 @@ if (process.env.NODE_ENV !== "production") {
   ArrayField.propTypes = {
     schema: PropTypes.object.isRequired,
     uiSchema: PropTypes.object,
+    idSchema: PropTypes.object,
     errorSchema: PropTypes.object,
     onChange: PropTypes.func.isRequired,
     formData: PropTypes.array,
diff --git a/src/components/fields/BooleanField.js b/src/components/fields/BooleanField.js
index 3f6715f8af..d7f9a217c6 100644
--- a/src/components/fields/BooleanField.js
+++ b/src/components/fields/BooleanField.js
@@ -12,11 +12,21 @@ function buildOptions(schema) {
 }
 
 function BooleanField(props) {
-  const {schema, name, uiSchema, formData, widgets, required, onChange} = props;
+  const {
+    schema,
+    name,
+    uiSchema,
+    idSchema,
+    formData,
+    widgets,
+    required,
+    onChange
+  } = props;
   const {title, description} = schema;
   const widget = uiSchema["ui:widget"];
   const commonProps = {
     schema,
+    id: idSchema && idSchema.id,
     onChange,
     label: title || name,
     placeholder: description,
@@ -35,6 +45,7 @@ if (process.env.NODE_ENV !== "production") {
   BooleanField.propTypes = {
     schema: PropTypes.object.isRequired,
     uiSchema: PropTypes.object,
+    idSchema: PropTypes.object,
     onChange: PropTypes.func.isRequired,
     formData: PropTypes.bool,
     required: PropTypes.bool,
diff --git a/src/components/fields/NumberField.js b/src/components/fields/NumberField.js
index 8f857829cb..32129d1dc1 100644
--- a/src/components/fields/NumberField.js
+++ b/src/components/fields/NumberField.js
@@ -13,6 +13,7 @@ function NumberField(props) {
 if (process.env.NODE_ENV !== "production") {
   NumberField.propTypes = {
     schema: PropTypes.object.isRequired,
+    idSchema: PropTypes.object,
     onChange: PropTypes.func.isRequired,
     formData: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     required: PropTypes.bool,
diff --git a/src/components/fields/ObjectField.js b/src/components/fields/ObjectField.js
index 1ee41dc5d3..6c8fb5951d 100644
--- a/src/components/fields/ObjectField.js
+++ b/src/components/fields/ObjectField.js
@@ -12,6 +12,7 @@ class ObjectField extends Component {
   static defaultProps = {
     uiSchema: {},
     errorSchema: {},
+    idSchema: {},
   }
 
   constructor(props) {
@@ -51,7 +52,7 @@ class ObjectField extends Component {
   }
 
   render() {
-    const {uiSchema, errorSchema, name} = this.props;
+    const {uiSchema, errorSchema, idSchema, name} = this.props;
     const {definitions, fields} = this.props.registry;
     const {SchemaField, TitleField} = fields;
     const schema = retrieveSchema(this.props.schema, definitions);
@@ -85,6 +86,7 @@ class ObjectField extends Component {
               schema={schema.properties[name]}
               uiSchema={uiSchema[name]}
               errorSchema={errorSchema[name]}
+              idSchema={idSchema[name]}
               formData={this.state[name]}
               onChange={this._onPropertyChange(name)}
               registry={this.props.registry} />
@@ -99,6 +101,8 @@ if (process.env.NODE_ENV !== "production") {
   ObjectField.propTypes = {
     schema: PropTypes.object.isRequired,
     uiSchema: PropTypes.object,
+    errorSchema: PropTypes.object,
+    idSchema: PropTypes.object,
     onChange: PropTypes.func.isRequired,
     formData: PropTypes.object,
     required: PropTypes.bool,
diff --git a/src/components/fields/SchemaField.js b/src/components/fields/SchemaField.js
index ba4f173bb0..b4663df6e7 100644
--- a/src/components/fields/SchemaField.js
+++ b/src/components/fields/SchemaField.js
@@ -30,14 +30,15 @@ function getFieldComponent(schema, uiSchema, fields) {
   return COMPONENT_TYPES[schema.type] || UnsupportedField;
 }
 
-function getLabel(label, required) {
+function getLabel(label, required, id) {
   if (!label) {
     return null;
   }
-  if (required) {
-    return label + REQUIRED_FIELD_SYMBOL;
-  }
-  return label;
+  return (
+    <label className="control-label" htmlFor={id}>
+      {required ? label + REQUIRED_FIELD_SYMBOL : label}
+    </label>
+  );
 }
 
 function ErrorList({errors}) {
@@ -59,9 +60,9 @@ function Wrapper({
     errorSchema,
     label,
     required,
-    widget,
     displayLabel,
-    children
+    id,
+    children,
   }) {
   const {errors} = errorSchema;
   const isError = errors && errors.length > 0;
@@ -72,12 +73,9 @@ function Wrapper({
     isError ? "field-error has-error" : "",
     classNames,
   ].join(" ").trim();
-  // XXX detect widget name?
   return (
     <div className={classList}>
-      {displayLabel && label ? <label className="control-label">
-                                 {getLabel(label, required)}
-                               </label> : null}
+      {displayLabel && label ? getLabel(label, required, id) : null}
       {children}
       {isError ? <ErrorList errors={errors} /> : <div/>}
     </div>
@@ -87,11 +85,11 @@ function Wrapper({
 if (process.env.NODE_ENV !== "production") {
   Wrapper.propTypes = {
     type: PropTypes.string.isRequired,
+    id: PropTypes.string,
     classNames: React.PropTypes.string,
     label: PropTypes.string,
     required: PropTypes.bool,
     displayLabel: PropTypes.bool,
-    widget: PropTypes.any, // XXX non
     children: React.PropTypes.node.isRequired,
   };
 }
@@ -101,7 +99,7 @@ Wrapper.defaultProps = {
 };
 
 function SchemaField(props) {
-  const {uiSchema, errorSchema, name, required, registry} = props;
+  const {uiSchema, errorSchema, idSchema, name, required, registry} = props;
   const {definitions, fields} = registry;
   const schema = retrieveSchema(props.schema, definitions);
   const FieldComponent = getFieldComponent(schema, uiSchema, fields);
@@ -125,6 +123,7 @@ function SchemaField(props) {
       required={required}
       type={schema.type}
       displayLabel={displayLabel}
+      id={idSchema.id}
       classNames={uiSchema.classNames}>
       <FieldComponent {...props} />
     </Wrapper>
@@ -134,12 +133,14 @@ function SchemaField(props) {
 SchemaField.defaultProps = {
   uiSchema: {},
   errorSchema: {},
+  idSchema: {},
 };
 
 if (process.env.NODE_ENV !== "production") {
   SchemaField.propTypes = {
     schema: PropTypes.object.isRequired,
     uiSchema: PropTypes.object,
+    idSchema: PropTypes.object,
     formData: PropTypes.any,
     errorSchema: PropTypes.object,
     registry: PropTypes.shape({
diff --git a/src/components/fields/StringField.js b/src/components/fields/StringField.js
index a58c39c742..35f89ade69 100644
--- a/src/components/fields/StringField.js
+++ b/src/components/fields/StringField.js
@@ -6,11 +6,21 @@ import SelectWidget from "./../widgets/SelectWidget";
 
 
 function StringField(props) {
-  const {schema, name, uiSchema, formData, widgets, required, onChange} = props;
+  const {
+    schema,
+    name,
+    uiSchema,
+    idSchema,
+    formData,
+    widgets,
+    required,
+    onChange
+  } = props;
   const {title, description} = schema;
   const widget = uiSchema["ui:widget"];
   const commonProps = {
     schema,
+    id: idSchema && idSchema.id,
     label: title || name,
     placeholder: description,
     onChange,
@@ -35,6 +45,7 @@ function StringField(props) {
 if (process.env.NODE_ENV !== "production") {
   StringField.propTypes = {
     schema: PropTypes.object.isRequired,
+    idSchema: PropTypes.object,
     onChange: PropTypes.func.isRequired,
     formData: PropTypes.oneOfType([
       React.PropTypes.string,
diff --git a/src/components/widgets/CheckboxWidget.js b/src/components/widgets/CheckboxWidget.js
index 86a2530aa5..fb4208c2b7 100644
--- a/src/components/widgets/CheckboxWidget.js
+++ b/src/components/widgets/CheckboxWidget.js
@@ -3,6 +3,7 @@ import React, { PropTypes } from "react";
 
 function CheckboxWidget({
   schema,
+  id,
   defaultValue,
   value,
   required,
@@ -14,6 +15,7 @@ function CheckboxWidget({
     <div className="checkbox">
       <label>
         <input type="checkbox"
+          id={id}
           title={placeholder}
           checked={value}
           defaultChecked={defaultValue}
@@ -27,6 +29,7 @@ function CheckboxWidget({
 if (process.env.NODE_ENV !== "production") {
   CheckboxWidget.propTypes = {
     schema: PropTypes.object.isRequired,
+    id: PropTypes.string.isRequired,
     onChange: PropTypes.func,
     defaultValue: PropTypes.bool,
     value: PropTypes.bool,
diff --git a/src/components/widgets/PasswordWidget.js b/src/components/widgets/PasswordWidget.js
index 4f1c166515..364197e198 100644
--- a/src/components/widgets/PasswordWidget.js
+++ b/src/components/widgets/PasswordWidget.js
@@ -3,6 +3,7 @@ import React, { PropTypes } from "react";
 
 function PasswordWidget({
   schema,
+  id,
   placeholder,
   value,
   defaultValue,
@@ -11,6 +12,7 @@ function PasswordWidget({
 }) {
   return (
     <input type="password"
+      id={id}
       className="form-control"
       value={value}
       defaultValue={defaultValue}
@@ -23,6 +25,7 @@ function PasswordWidget({
 if (process.env.NODE_ENV !== "production") {
   PasswordWidget.propTypes = {
     schema: PropTypes.object.isRequired,
+    id: PropTypes.string.isRequired,
     placeholder: PropTypes.string,
     value: PropTypes.oneOfType([
       React.PropTypes.string,
diff --git a/src/components/widgets/RadioWidget.js b/src/components/widgets/RadioWidget.js
index 7530a99858..2e9c857f73 100644
--- a/src/components/widgets/RadioWidget.js
+++ b/src/components/widgets/RadioWidget.js
@@ -18,8 +18,8 @@ function RadioWidget({
         const checked = value !== undefined ? option.value === value :
                                               option.value === defaultValue;
         return (
-          <div className="radio">
-            <label key={i}>
+          <div key={i} className="radio">
+            <label>
               <input type="radio"
                 name={name}
                 value={option.value}
@@ -38,6 +38,7 @@ function RadioWidget({
 if (process.env.NODE_ENV !== "production") {
   RadioWidget.propTypes = {
     schema: PropTypes.object.isRequired,
+    id: PropTypes.string.isRequired,
     options: PropTypes.array.isRequired,
     placeholder: PropTypes.string,
     value: PropTypes.any,
diff --git a/src/components/widgets/RangeWidget.js b/src/components/widgets/RangeWidget.js
index 9c24223aa3..4dcaacb31a 100644
--- a/src/components/widgets/RangeWidget.js
+++ b/src/components/widgets/RangeWidget.js
@@ -17,6 +17,7 @@ function rangeSpec(schema) {
 
 function RangeWidget({
   schema,
+  id,
   placeholder,
   value,
   defaultValue,
@@ -26,6 +27,7 @@ function RangeWidget({
   return (
     <div className="field-range-wrapper">
       <input type="range"
+        id={id}
         value={value}
         defaultValue={defaultValue}
         placeholder={placeholder}
@@ -40,6 +42,7 @@ function RangeWidget({
 if (process.env.NODE_ENV !== "production") {
   RangeWidget.propTypes = {
     schema: PropTypes.object.isRequired,
+    id: PropTypes.string.isRequired,
     placeholder: PropTypes.string,
     value: PropTypes.oneOfType([
       React.PropTypes.string,
diff --git a/src/components/widgets/SelectWidget.js b/src/components/widgets/SelectWidget.js
index 0a44b2a5f2..a2c7e799d9 100644
--- a/src/components/widgets/SelectWidget.js
+++ b/src/components/widgets/SelectWidget.js
@@ -18,6 +18,7 @@ function processValue(type, value) {
 
 function SelectWidget({
   schema,
+  id,
   options,
   placeholder,
   value,
@@ -28,6 +29,7 @@ function SelectWidget({
 }) {
   return (
     <select
+      id={id}
       multiple={multiple}
       className="form-control"
       title={placeholder}
@@ -54,6 +56,7 @@ function SelectWidget({
 if (process.env.NODE_ENV !== "production") {
   SelectWidget.propTypes = {
     schema: PropTypes.object.isRequired,
+    id: PropTypes.string.isRequired,
     options: PropTypes.array.isRequired,
     placeholder: PropTypes.string,
     value: PropTypes.any,
diff --git a/src/components/widgets/TextWidget.js b/src/components/widgets/TextWidget.js
index 7c7902bd30..1d0438e624 100644
--- a/src/components/widgets/TextWidget.js
+++ b/src/components/widgets/TextWidget.js
@@ -3,6 +3,7 @@ import React, { PropTypes } from "react";
 
 function TextWidget({
   schema,
+  id,
   placeholder,
   value,
   defaultValue,
@@ -11,6 +12,7 @@ function TextWidget({
 }) {
   return (
     <input type="text"
+      id={id}
       className="form-control"
       value={value}
       defaultValue={defaultValue}
@@ -23,6 +25,7 @@ function TextWidget({
 if (process.env.NODE_ENV !== "production") {
   TextWidget.propTypes = {
     schema: PropTypes.object.isRequired,
+    id: PropTypes.string.isRequired,
     placeholder: PropTypes.string,
     value: PropTypes.oneOfType([
       React.PropTypes.string,
diff --git a/src/components/widgets/TextareaWidget.js b/src/components/widgets/TextareaWidget.js
index 658b7fe4c3..81d8296287 100644
--- a/src/components/widgets/TextareaWidget.js
+++ b/src/components/widgets/TextareaWidget.js
@@ -3,6 +3,7 @@ import React, { PropTypes } from "react";
 
 function TextWidget({
   schema,
+  id,
   placeholder,
   value,
   defaultValue,
@@ -11,6 +12,7 @@ function TextWidget({
 }) {
   return (
     <textarea
+      id={id}
       className="form-control"
       value={value}
       defaultValue={defaultValue}
@@ -23,6 +25,7 @@ function TextWidget({
 if (process.env.NODE_ENV !== "production") {
   TextWidget.propTypes = {
     schema: PropTypes.object.isRequired,
+    id: PropTypes.string.isRequired,
     placeholder: PropTypes.string,
     value: PropTypes.string,
     defaultValue: PropTypes.string,
diff --git a/src/components/widgets/UpDownWidget.js b/src/components/widgets/UpDownWidget.js
index 4ee5d41b8b..6934ba6036 100644
--- a/src/components/widgets/UpDownWidget.js
+++ b/src/components/widgets/UpDownWidget.js
@@ -17,6 +17,7 @@ function rangeSpec(schema) {
 
 function UpDownWidget({
   schema,
+  id,
   placeholder,
   value,
   defaultValue,
@@ -25,6 +26,7 @@ function UpDownWidget({
 }) {
   return (
     <input type="number"
+      id={id}
       className="form-control"
       value={value}
       defaultValue={defaultValue}
@@ -38,6 +40,7 @@ function UpDownWidget({
 if (process.env.NODE_ENV !== "production") {
   UpDownWidget.propTypes = {
     schema: PropTypes.object.isRequired,
+    id: PropTypes.string.isRequired,
     placeholder: PropTypes.string,
     value: PropTypes.oneOfType([
       React.PropTypes.string,
diff --git a/src/utils.js b/src/utils.js
index 89812c2cc8..f0fb768172 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -246,3 +246,23 @@ export function toErrorSchema(errors) {
     return errorSchema;
   }, {});
 }
+
+export function toIdSchema(schema, id, definitions) {
+  const idSchema = {id: id || "root"};
+  if ("$ref" in schema) {
+    const _schema = retrieveSchema(schema, definitions);
+    return toIdSchema(_schema, id, definitions);
+  }
+  if ("items" in schema) {
+    return toIdSchema(schema.items, id, definitions);
+  }
+  if (schema.type !== "object") {
+    return idSchema;
+  }
+  for (const name in schema.properties || {}) {
+    const field = schema.properties[name];
+    const fieldId = idSchema.id + "_" + name;
+    idSchema[name] = toIdSchema(field, fieldId, definitions);
+  }
+  return idSchema;
+}
diff --git a/test/ArrayField_test.js b/test/ArrayField_test.js
index 1054e60fdd..5a37e42bf2 100644
--- a/test/ArrayField_test.js
+++ b/test/ArrayField_test.js
@@ -1,7 +1,9 @@
+/*eslint no-unused-vars: [2, { "varsIgnorePattern": "^d$" }]*/
+
 import { expect } from "chai";
 import { Simulate } from "react-addons-test-utils";
 
-import { createFormComponent } from "./test_utils";
+import { createFormComponent, d } from "./test_utils";
 
 describe("ArrayField", () => {
   describe("List of inputs", () => {
@@ -67,6 +69,14 @@ describe("ArrayField", () => {
       expect(inputs).to.have.length.of(1);
       expect(inputs[0].value).eql("bar");
     });
+
+    it("should render the select widget with the expected id", () => {
+      const {node} = createFormComponent({schema, formData: ["foo", "bar"]});
+
+      const inputs = node.querySelectorAll("input[type=text]");
+      expect(inputs[0].id).eql("root_0");
+      expect(inputs[1].id).eql("root_1");
+    });
   });
 
   describe("Multiple choices list", () => {
@@ -132,5 +142,11 @@ describe("ArrayField", () => {
       expect(options[1].getAttribute("selected")).not.to.be.null;  // bar
       expect(options[2].getAttribute("selected")).to.be.null;  // fuzz
     });
+
+    it("should render the select widget with the expected id", () => {
+      const {node} = createFormComponent({schema});
+
+      expect(node.querySelector("select").id).eql("root");
+    });
   });
 });
diff --git a/test/BooleanField_test.js b/test/BooleanField_test.js
index 0db6d25ee9..ca31fd801c 100644
--- a/test/BooleanField_test.js
+++ b/test/BooleanField_test.js
@@ -76,4 +76,13 @@ describe("BooleanField", () => {
                                label => label.textContent);
     expect(labels).eql(["Yes", "No"]);
   });
+
+  it("should render the widget with the expected id", () => {
+    const {node} = createFormComponent({schema: {
+      type: "boolean",
+    }});
+
+    expect(node.querySelector("input[type=checkbox]").id)
+      .eql("root");
+  });
 });
diff --git a/test/Form_test.js b/test/Form_test.js
index 1a7901176d..63936fecbc 100644
--- a/test/Form_test.js
+++ b/test/Form_test.js
@@ -1,4 +1,3 @@
-
 /*eslint no-unused-vars: [2, { "varsIgnorePattern": "^d$" }]*/
 
 import { expect } from "chai";
diff --git a/test/NumberField_test.js b/test/NumberField_test.js
index 509f0fa6f1..76fdb223ac 100644
--- a/test/NumberField_test.js
+++ b/test/NumberField_test.js
@@ -76,6 +76,15 @@ describe("NumberField", () => {
 
       expect(comp.state.formData).eql("2.");
     });
+
+    it("should render the widget with the expected id", () => {
+      const {node} = createFormComponent({schema: {
+        type: "number",
+      }});
+
+      expect(node.querySelector("input[type=text]").id)
+        .eql("root");
+    });
   });
 
   describe("SelectWidget", () => {
@@ -142,5 +151,15 @@ describe("NumberField", () => {
 
       expect(comp.state.formData).eql(2);
     });
+
+    it("should render the widget with the expected id", () => {
+      const {node} = createFormComponent({schema: {
+        type: "number",
+        enum: [1, 2]
+      }});
+
+      expect(node.querySelector("select").id)
+        .eql("root");
+    });
   });
 });
diff --git a/test/ObjectField_test.js b/test/ObjectField_test.js
index 55bf38b1bb..4419466bfd 100644
--- a/test/ObjectField_test.js
+++ b/test/ObjectField_test.js
@@ -1,8 +1,10 @@
+/*eslint no-unused-vars: [2, { "varsIgnorePattern": "^d$" }]*/
+
 import React from "react";
 import { expect } from "chai";
 import { Simulate } from "react-addons-test-utils";
 
-import { createFormComponent } from "./test_utils";
+import { createFormComponent, d } from "./test_utils";
 
 describe("ObjectField", () => {
   describe("schema", () => {
@@ -108,6 +110,13 @@ describe("ObjectField", () => {
 
       expect(comp.state.formData.foo).eql("changed");
     });
+
+    it("should render the widget with the expected id", () => {
+      const {node} = createFormComponent({schema});
+
+      expect(node.querySelector("input[type=text]").id).eql("root_foo");
+      expect(node.querySelector("input[type=checkbox]").id).eql("root_bar");
+    });
   });
 
   describe("fields ordering", () => {
@@ -195,5 +204,15 @@ describe("ObjectField", () => {
 
       expect(labels).eql(["bar", "foo"]);
     });
+
+    it("should render the widget with the expected id", () => {
+      const {node} = createFormComponent({schema, uiSchema: {
+        "ui:order": ["bar", "foo"]
+      }});
+
+      const ids = [].map.call(node.querySelectorAll("input[type=text]"),
+        (node) => node.id);
+      expect(ids).eql(["root_bar", "root_foo"]);
+    });
   });
 });
diff --git a/test/StringField_test.js b/test/StringField_test.js
index 224d8acf8c..a0342b73f8 100644
--- a/test/StringField_test.js
+++ b/test/StringField_test.js
@@ -64,6 +64,15 @@ describe("StringField", () => {
       expect(node.querySelector(".field input").getAttribute("value"))
         .eql("plip");
     });
+
+    it("should render the widget with the expected id", () => {
+      const {node} = createFormComponent({schema: {
+        type: "string",
+      }});
+
+      expect(node.querySelector("input[type=text]").id)
+        .eql("root");
+    });
   });
 
   describe("SelectWidget", () => {
@@ -143,5 +152,15 @@ describe("StringField", () => {
 
       expect(comp.state.formData).eql("bar");
     });
+
+    it("should render the widget with the expected id", () => {
+      const {node} = createFormComponent({schema: {
+        type: "string",
+        enum: ["a", "b"]
+      }});
+
+      expect(node.querySelector("select").id)
+        .eql("root");
+    });
   });
 });
diff --git a/test/performance_test.js b/test/performance_test.js
index 83fe6da82d..5ec8cb5ff3 100644
--- a/test/performance_test.js
+++ b/test/performance_test.js
@@ -103,6 +103,7 @@ describe("Rendering performance optimizations", () => {
         foo: {type: "string"}
       }
     };
+    const idSchema = {id: "root", foo: {id: "root_plop"}};
 
     it("should not render if next props are equivalent", () => {
       const {comp} = createComponent(ObjectField, {
@@ -110,6 +111,7 @@ describe("Rendering performance optimizations", () => {
         schema,
         uiSchema,
         onChange,
+        idSchema,
       });
       sandbox.stub(comp, "render").returns(<div/>);
 
@@ -126,6 +128,7 @@ describe("Rendering performance optimizations", () => {
         schema,
         formData,
         onChange,
+        idSchema,
       });
       sandbox.stub(comp, "render").returns(<div/>);
 
diff --git a/test/utils_test.js b/test/utils_test.js
index 664e251cf3..1c78d2ac6c 100644
--- a/test/utils_test.js
+++ b/test/utils_test.js
@@ -6,7 +6,8 @@ import {
   isMultiSelect,
   mergeObjects,
   retrieveSchema,
-  shouldRender
+  shouldRender,
+  toIdSchema
 } from "../src/utils";
 
 
@@ -365,4 +366,84 @@ describe("utils", () => {
       });
     });
   });
+
+  describe("toIdSchema", () => {
+    it("should return an idSchema for root field", () => {
+      const schema = {type: "string"};
+
+      expect(toIdSchema(schema)).eql({id: "root"});
+    });
+
+    it("should return an idSchema for nested objects", () => {
+      const schema = {
+        type: "object",
+        properties: {
+          level1: {
+            type: "object",
+            properties: {
+              level2: {
+                type: "string"
+              }
+            }
+          }
+        }
+      };
+
+      expect(toIdSchema(schema)).eql({
+        id: "root",
+        level1: {
+          id: "root_level1",
+          level2: {
+            id: "root_level1_level2",
+          }
+        }
+      });
+    });
+
+    it("should return an idSchema for array item objects", () => {
+      const schema = {
+        type: "array",
+        items: {
+          type: "object",
+          properties: {
+            foo: {
+              type: "string"
+            }
+          }
+        }
+      };
+
+      expect(toIdSchema(schema)).eql({
+        id: "root",
+        foo: {
+          id: "root_foo"
+        }
+      });
+    });
+
+    it("should retrieve reference schema definitions", () => {
+      const schema = {
+        definitions: {
+          testdef: {
+            type: "object",
+            properties: {
+              foo: {type: "string"},
+              bar: {type: "string"},
+            }
+          }
+        },
+        $ref: "#/definitions/testdef"
+      };
+
+      expect(toIdSchema(schema, undefined, schema.definitions)).eql({
+        id: "root",
+        foo: {
+          id: "root_foo"
+        },
+        bar: {
+          id: "root_bar"
+        }
+      });
+    });
+  });
 });

From a105c5385fb7be7b3a4a866bb263bef8303c4750 Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Sun, 27 Mar 2016 19:00:54 +0200
Subject: [PATCH 08/19] Added credits for sample bootstrap themes.

---
 playground/index.html      | 5 +++++
 playground/index.prod.html | 8 ++++++--
 playground/styles.css      | 0
 3 files changed, 11 insertions(+), 2 deletions(-)
 delete mode 100644 playground/styles.css

diff --git a/playground/index.html b/playground/index.html
index 68c028ee10..b561650794 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -9,6 +9,11 @@
 </head>
 <body>
   <div id="app"></div>
+  <p style="text-align:center">
+    Bootstrap themes courtsesy of
+    <a href="http://bootswatch.com/">Bootswatch</a> and
+    <a href="https://github.com/aalpern/bootstrap-solarized/">bootstrap-solarized</a>.
+  </p>
   <script src="/static/bundle.js"></script>
 </body>
 </html>
diff --git a/playground/index.prod.html b/playground/index.prod.html
index 0472138cee..9913756294 100644
--- a/playground/index.prod.html
+++ b/playground/index.prod.html
@@ -5,11 +5,15 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>react-jsonschema-form playground</title>
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
-  <link rel="stylesheet" href="./styles.css">
+  <link rel="stylesheet" id="theme" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 </head>
 <body>
   <div id="app"></div>
+  <p style="text-align:center">
+    Bootstrap themes courtsesy of
+    <a href="http://bootswatch.com/">Bootswatch</a> and
+    <a href="https://github.com/aalpern/bootstrap-solarized/">bootstrap-solarized</a>.
+  </p>
   <script src="./bundle.js"></script>
 </body>
 </html>
diff --git a/playground/styles.css b/playground/styles.css
deleted file mode 100644
index e69de29bb2..0000000000

From 78462a69400a834ed2bc1327d2dee1bb9a936726 Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Sun, 27 Mar 2016 19:02:11 +0200
Subject: [PATCH 09/19] Code lint.

---
 playground/app.js                   | 3 ++-
 src/components/fields/ArrayField.js | 4 ----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/playground/app.js b/playground/app.js
index a018db7e21..a740905a06 100644
--- a/playground/app.js
+++ b/playground/app.js
@@ -7,6 +7,8 @@ import { shouldRender } from "../src/utils";
 import { samples } from "./samples";
 import Form from "../src";
 
+// Import a few CodeMirror themes; these are used to match alternative
+// bootstrap ones.
 import "codemirror/lib/codemirror.css";
 import "codemirror/theme/dracula.css";
 import "codemirror/theme/blackboard.css";
@@ -15,7 +17,6 @@ import "codemirror/theme/ttcn.css";
 import "codemirror/theme/solarized.css";
 import "codemirror/theme/monokai.css";
 import "codemirror/theme/eclipse.css";
-import "./styles.css";
 
 const log = (type) => console.log.bind(console, type);
 const fromJson = (json) => JSON.parse(json);
diff --git a/src/components/fields/ArrayField.js b/src/components/fields/ArrayField.js
index 25741aba07..430239029d 100644
--- a/src/components/fields/ArrayField.js
+++ b/src/components/fields/ArrayField.js
@@ -11,10 +11,6 @@ import {
 import SelectWidget from "./../widgets/SelectWidget";
 
 
-function itemIndexSchema(idSchema, index) {
-  return toIdSchema();
-}
-
 class ArrayField extends Component {
   static defaultProps = {
     uiSchema: {},

From 5601b3db714dfdcfbc700d7298a4f0f0866303a0 Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Mon, 28 Mar 2016 10:57:52 +0200
Subject: [PATCH 10/19] Added example of erroneous boolean value in the
 playground.

---
 playground/samples/errors.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/playground/samples/errors.js b/playground/samples/errors.js
index e6b7dd76e2..179c28918e 100644
--- a/playground/samples/errors.js
+++ b/playground/samples/errors.js
@@ -9,6 +9,10 @@ module.exports = {
         minLength: 8,
         pattern: "\\d+"
       },
+      active: {
+        type: "boolean",
+        title: "Active"
+      },
       skills: {
         type: "array",
         items: {
@@ -31,6 +35,7 @@ module.exports = {
   uiSchema: {},
   formData: {
     firstName: "Chuck",
+    active: "wrong",
     skills: ["karate", "budo", "aikido"],
     multipleChoicesList: ["foo", "bar", "fuzz"]
   }

From 4dac2ac61560fb066cc1417cede4b1d634ed2c36 Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Mon, 28 Mar 2016 10:58:06 +0200
Subject: [PATCH 11/19] Added test for complex nested array ids.

---
 test/ArrayField_test.js | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/test/ArrayField_test.js b/test/ArrayField_test.js
index 5a37e42bf2..50eff8895c 100644
--- a/test/ArrayField_test.js
+++ b/test/ArrayField_test.js
@@ -70,13 +70,43 @@ describe("ArrayField", () => {
       expect(inputs[0].value).eql("bar");
     });
 
-    it("should render the select widget with the expected id", () => {
+    it("should render the input widgets with the expected ids", () => {
       const {node} = createFormComponent({schema, formData: ["foo", "bar"]});
 
       const inputs = node.querySelectorAll("input[type=text]");
       expect(inputs[0].id).eql("root_0");
       expect(inputs[1].id).eql("root_1");
     });
+
+    it("should render nested input widgets with the expected ids", () => {
+      const complexSchema = {
+        type: "object",
+        properties: {
+          foo: {
+            type: "array",
+            items: {
+              type: "object",
+              properties: {
+                bar: {type: "string"},
+                baz: {type: "string"}
+              }
+            }
+          }
+        }
+      };
+      const {node} = createFormComponent({schema: complexSchema, formData: {
+        foo: [
+          {bar: "bar1", baz: "baz1"},
+          {bar: "bar2", baz: "baz2"},
+        ]
+      }});
+
+      const inputs = node.querySelectorAll("input[type=text]");
+      expect(inputs[0].id).eql("root_foo_0_bar");
+      expect(inputs[1].id).eql("root_foo_0_baz");
+      expect(inputs[2].id).eql("root_foo_1_bar");
+      expect(inputs[3].id).eql("root_foo_1_baz");
+    });
   });
 
   describe("Multiple choices list", () => {

From 92ef88e428b0aee78113f5d35b67653a9eb700c2 Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Mon, 28 Mar 2016 11:07:05 +0200
Subject: [PATCH 12/19] Improved playground footer.

---
 playground/index.html      | 2 ++
 playground/index.prod.html | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/playground/index.html b/playground/index.html
index b561650794..f17ae48598 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -10,6 +10,8 @@
 <body>
   <div id="app"></div>
   <p style="text-align:center">
+    Powered by
+    <a href="https://github.com/mozilla-services/react-jsonschema-form">react-jsonschema-form</a>.
     Bootstrap themes courtsesy of
     <a href="http://bootswatch.com/">Bootswatch</a> and
     <a href="https://github.com/aalpern/bootstrap-solarized/">bootstrap-solarized</a>.
diff --git a/playground/index.prod.html b/playground/index.prod.html
index 9913756294..936ebc317d 100644
--- a/playground/index.prod.html
+++ b/playground/index.prod.html
@@ -10,6 +10,8 @@
 <body>
   <div id="app"></div>
   <p style="text-align:center">
+    Powered by
+    <a href="https://github.com/mozilla-services/react-jsonschema-form">react-jsonschema-form</a>.
     Bootstrap themes courtsesy of
     <a href="http://bootswatch.com/">Bootswatch</a> and
     <a href="https://github.com/aalpern/bootstrap-solarized/">bootstrap-solarized</a>.

From 2251995fe3d0213b1392ccc0985c4810c090cfc2 Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Mon, 28 Mar 2016 11:17:45 +0200
Subject: [PATCH 13/19] Added test for multiple nested object ids.

---
 test/utils_test.js | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/test/utils_test.js b/test/utils_test.js
index 1c78d2ac6c..ab2aba249a 100644
--- a/test/utils_test.js
+++ b/test/utils_test.js
@@ -400,6 +400,42 @@ describe("utils", () => {
       });
     });
 
+    it("should return an idSchema for multiple nested objects", () => {
+      const schema = {
+        type: "object",
+        properties: {
+          level1a: {
+            type: "object",
+            properties: {
+              level1a2a: {type: "string"},
+              level1a2b: {type: "string"}
+            }
+          },
+          level1b: {
+            type: "object",
+            properties: {
+              level1b2a: {type: "string"},
+              level1b2b: {type: "string"}
+            }
+          }
+        }
+      };
+
+      expect(toIdSchema(schema)).eql({
+        id: "root",
+        level1a: {
+          id: "root_level1a",
+          level1a2a: {id: "root_level1a_level1a2a"},
+          level1a2b: {id: "root_level1a_level1a2b"},
+        },
+        level1b: {
+          id: "root_level1b",
+          level1b2a: {id: "root_level1b_level1b2a"},
+          level1b2b: {id: "root_level1b_level1b2b"},
+        },
+      });
+    });
+
     it("should return an idSchema for array item objects", () => {
       const schema = {
         type: "array",

From b1641bbd146293c48087993090bc78dff3cc7aa6 Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Mon, 28 Mar 2016 11:19:14 +0200
Subject: [PATCH 14/19] Shorten tests.

---
 test/utils_test.js | 24 ++++++------------------
 1 file changed, 6 insertions(+), 18 deletions(-)

diff --git a/test/utils_test.js b/test/utils_test.js
index ab2aba249a..1155d647da 100644
--- a/test/utils_test.js
+++ b/test/utils_test.js
@@ -381,9 +381,7 @@ describe("utils", () => {
           level1: {
             type: "object",
             properties: {
-              level2: {
-                type: "string"
-              }
+              level2: {type: "string"}
             }
           }
         }
@@ -393,9 +391,7 @@ describe("utils", () => {
         id: "root",
         level1: {
           id: "root_level1",
-          level2: {
-            id: "root_level1_level2",
-          }
+          level2: {id: "root_level1_level2"}
         }
       });
     });
@@ -442,18 +438,14 @@ describe("utils", () => {
         items: {
           type: "object",
           properties: {
-            foo: {
-              type: "string"
-            }
+            foo: {type: "string"}
           }
         }
       };
 
       expect(toIdSchema(schema)).eql({
         id: "root",
-        foo: {
-          id: "root_foo"
-        }
+        foo: {id: "root_foo"}
       });
     });
 
@@ -473,12 +465,8 @@ describe("utils", () => {
 
       expect(toIdSchema(schema, undefined, schema.definitions)).eql({
         id: "root",
-        foo: {
-          id: "root_foo"
-        },
-        bar: {
-          id: "root_bar"
-        }
+        foo: {id: "root_foo"},
+        bar: {id: "root_bar"}
       });
     });
   });

From 04190fb3696c1fd2b5a3a1386ac1b412755b386b Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Mon, 28 Mar 2016 11:51:33 +0200
Subject: [PATCH 15/19] Better propertions for playground sections.

---
 playground/app.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/playground/app.js b/playground/app.js
index a740905a06..0a9890f381 100644
--- a/playground/app.js
+++ b/playground/app.js
@@ -304,7 +304,7 @@ class App extends Component {
             </div>
           </div>
         </div>
-        <div className="col-sm-6">
+        <div className="col-sm-7">
           <Editor title="JSONSchema"
             theme={this.state.editor}
             code={toJson(this.state.schema)}
@@ -324,7 +324,7 @@ class App extends Component {
             </div>
           </div>
         </div>
-        <div className="col-sm-6">
+        <div className="col-sm-5">
           {!this.state.form ? null :
             <Form
               schema={this.state.schema}

From 2adbb3e51d109c49a3a0fab381b5d378d3192e16 Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Mon, 28 Mar 2016 18:08:56 +0200
Subject: [PATCH 16/19] Readded link to generated stylesheets in prod
 playground html.

---
 playground/index.prod.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/playground/index.prod.html b/playground/index.prod.html
index 936ebc317d..8cfb66c39a 100644
--- a/playground/index.prod.html
+++ b/playground/index.prod.html
@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>react-jsonschema-form playground</title>
   <link rel="stylesheet" id="theme" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+  <link rel="stylesheet" href="./styles.css">
 </head>
 <body>
   <div id="app"></div>

From 138568f1b54700c91fff2f1734b4e8bd9c2bc7bc Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Tue, 29 Mar 2016 09:32:06 +0200
Subject: [PATCH 17/19] Updated docs and build commands.

---
 README.md                     | 46 +++++++++++------
 css/react-jsonschema-form.css | 95 -----------------------------------
 devServer.js                  |  4 --
 package.json                  |  3 +-
 4 files changed, 32 insertions(+), 116 deletions(-)
 delete mode 100644 css/react-jsonschema-form.css

diff --git a/README.md b/README.md
index 0d27e1af81..6c1aa3a63f 100644
--- a/README.md
+++ b/README.md
@@ -3,15 +3,17 @@ react-jsonschema-form
 
 [![Build Status](https://travis-ci.org/mozilla-services/react-jsonschema-form.svg)](https://travis-ci.org/mozilla-services/react-jsonschema-form)
 
-A simple [React](http://facebook.github.io/react/) component capable of building HTML forms out of a [JSON schema](http://jsonschema.net/).
+A simple [React](http://facebook.github.io/react/) component capable of building HTML forms out of a [JSON schema](http://jsonschema.net/) and using [Bootstrap](http://getbootstrap.com/) semantics by default.
 
-A [live demo](https://mozilla-services.github.io/react-jsonschema-form/) is hosted on gh-pages.
+A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) is hosted on gh-pages.
 
-![](http://i.imgur.com/oxBlg96.png)
+![](http://i.imgur.com/bmQ3HlO.png)
 
 ## Table of Contents
 
   - [Installation](#installation)
+     - [As a npm-based project dependency](#as-a-npm-based-project-dependency)
+     - [As a script served from a CDN](#as-a-script-served-from-a-cdn)
   - [Usage](#usage)
   - [Form customization](#form-customization)
      - [The uiSchema object](#the-uischema-object)
@@ -29,6 +31,7 @@ A [live demo](https://mozilla-services.github.io/react-jsonschema-form/) is host
      - [Custom field components](#custom-field-components)
      - [Custom SchemaField](#custom-schemafield)
      - [Custom titles](#custom-titles)
+  - [Styling your forms](#styling-your-forms)
   - [Schema definitions and references](#schema-definitions-and-references)
   - [Contributing](#contributing)
      - [Development server](#development-server)
@@ -42,13 +45,16 @@ A [live demo](https://mozilla-services.github.io/react-jsonschema-form/) is host
 
 Requires React 0.14+.
 
-As a npm-based project dependency:
+
+### As a npm-based project dependency
 
 ```
 $ npm install react-jsonschema-form --save
 ```
 
-As a script dependency served from a CDN:
+> Note: While the library renders [Bootstrap](http://getbootstrap.com/) HTML semantics, you have to build/load the Bootstrap styles on your own.
+
+### As a script served from a CDN
 
 ```html
   <script src="https://npmcdn.com/react-jsonschema-form/dist/react-jsonschema-form.js"></script>
@@ -56,13 +62,7 @@ As a script dependency served from a CDN:
 
 Source maps are available at [this url](https://npmcdn.com/react-jsonschema-form/dist/react-jsonschema-form.js.map).
 
-Note that the CDN version **does not** embed *react* nor *react-dom*.
-
-A default, very basic CSS stylesheet is provided, though you're encouraged to build your own.
-
-```html
-<link rel="stylesheet" href="https://npmcdn.com/react-jsonschema-form@0.10.0/dist/react-jsonschema-form.css">
-```
+> Note: The CDN version **does not** embed *react* nor *react-dom*.
 
 ## Usage
 
@@ -73,7 +73,7 @@ import { render } from "react-dom";
 import Form from "react-jsonschema-form";
 
 const schema = {
-  title: "Todo Tasks",
+  title: "Todo",
   type: "object",
   required: ["title"],
   properties: {
@@ -98,9 +98,9 @@ render((
 ), document.getElementById("app"));
 ```
 
-That should give something like this (if you use the default stylesheet):
+That should give something like this (if you took care of loading the standard [Bootstrap](http://getbootstrap.com/) stylesheet):
 
-![](http://i.imgur.com/qKFvod6.png)
+![](http://i.imgur.com/DZQYPyu.png)
 
 ## Form customization
 
@@ -458,6 +458,22 @@ render((
 ), document.getElementById("app"));
 ```
 
+## Styling your forms
+
+This library renders form fields and widgets leveraging the [Bootstrap](http://getbootstrap.com/) semantics. That means your forms will be beautiful by default if you're loading its stylesheet in your page.
+
+You're not necessarily forced to use Bootstrap; while it uses its semantics, it also provides a bunch of other class names so you can bring new styles or override default ones quite easily in your own personalized stylesheet. That's just HTML after all :)
+
+If you're okay with using styles from the Bootstrap ecosystem though, then the good news is that you have access to many themes for it, which are compatible with our generated forms!
+
+Here are some examples from the [playground](http://mozilla-services.github.io/react-jsonschema-form/), using some of the [Bootswatch](http://bootswatch.com/) free themes:
+
+![](http://i.imgur.com/1Z5oUK3.png)
+![](http://i.imgur.com/IMFqMwK.png)
+![](http://i.imgur.com/HOACwt5.png)
+
+Last, if you really really want to override the semantics generated by the lib, you can always create and use your own custom [widget](#custom-widget-components), [field](#custom-field-components) and/or [schema field](#custom-schemafield) components.
+
 ## Schema definitions and references
 
 This library partially supports [inline schema definition dereferencing]( http://json-schema.org/latest/json-schema-core.html#rfc.section.7.2.3), which is Barbarian for *avoiding to copy and paste commonly used field schemas*:
diff --git a/css/react-jsonschema-form.css b/css/react-jsonschema-form.css
deleted file mode 100644
index eb4d60cce8..0000000000
--- a/css/react-jsonschema-form.css
+++ /dev/null
@@ -1,95 +0,0 @@
-.rjsf * {
-  box-sizing: border-box;
-}
-
-.rjsf {
-  padding: 0;
-  font-size: .8em;
-  color: #555;
-}
-
-.rjsf fieldset {
-  border: 1px solid #aaa;
-  border-radius: 4px;
-  margin-top: .5em;
-}
-
-.rjsf fieldset legend {
-  font-weight: bold;
-  margin-left: -.2em;
-}
-
-.rjsf button {
-  display: inline-block;
-  color: #FFF;
-  background-color: #286090;
-  border-color: #122B40;
-  padding: 2px 8px;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.5em;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  border: 1px solid transparent;
-  border-radius: 4px;
-}
-
-.rjsf input[type=text] {
-  display: block;
-  width: 100%;
-  height: 34px;
-  padding: 3px 6px;
-  font-size: 14px;
-  color: #555;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
-}
-
-.rjsf .errors {
-  color: red;
-}
-
-.rjsf .field {
-  padding-top: 1em;
-}
-
-.rjsf .field label {
-  display: block;
-  font-weight: bold;
-}
-
-.rjsf .field input[type=text] {
-}
-
-.rjsf .field select {
-  display: block;
-}
-
-.rjsf .array-item-list {
-}
-
-.rjsf .array-item-add button,
-.rjsf .array-item-remove button {
-  width: 32px;
-  height: 32px;
-}
-
-.rjsf .array-item-add {
-  margin-bottom: 0;
-}
-
-.rjsf .array-item-remove {
-  margin: .2em 0;
-}
-
-.rjsf .field-array-of-string input[type=text] {
-  width: calc(100% - 38px);
-}
-
-.rjsf .field-array-of-string .array-item-remove {
-  float: right;
-  width: 30px;
-  margin-top: -2.3em;
-}
diff --git a/devServer.js b/devServer.js
index f8ee35eb66..147517dcc4 100644
--- a/devServer.js
+++ b/devServer.js
@@ -19,10 +19,6 @@ app.get("/", function(req, res) {
   res.sendFile(path.join(__dirname, "playground", "index.html"));
 });
 
-app.get("/react-jsonschema-form.css", function(req, res) {
-  res.sendFile(path.join(__dirname, "css", "react-jsonschema-form.css"));
-});
-
 app.listen(port, "localhost", function(err) {
   if (err) {
     console.log(err);
diff --git a/package.json b/package.json
index 00d96197ae..3635f45aba 100644
--- a/package.json
+++ b/package.json
@@ -4,11 +4,10 @@
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
   "scripts": {
     "build:readme": "toctoc README.md -w",
-    "build:css": "cp css/react-jsonschema-form.css dist/",
     "build:lib": "rimraf lib && NODE_ENV=production babel -d lib/ src/",
     "build:dist": "rimraf dist && NODE_ENV=production webpack --config webpack.config.dist.js --optimize-minimize",
     "build:playground": "rimraf build && NODE_ENV=production webpack --config webpack.config.prod.js --optimize-minimize && cp playground/index.prod.html build/index.html",
-    "dist": "npm run build:lib && npm run build:dist && npm run build:css",
+    "dist": "npm run build:lib && npm run build:dist",
     "lint": "eslint src test",
     "publish-to-gh-pages": "npm run build:playground && gh-pages --dist build/",
     "publish-to-npm": "npm run build:readme && npm run dist && npm publish",

From 9b392a9b1a0bd50c29a6348bb0ad9823ddc2a7e8 Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Tue, 29 Mar 2016 10:07:25 +0200
Subject: [PATCH 18/19] Added ui:rootFieldId uiSchema directive.

---
 README.md              | 12 +++++++++
 src/components/Form.js |  5 ++--
 test/uiSchema_test.js  | 61 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 76 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 6c1aa3a63f..9f08d9c5d7 100644
--- a/README.md
+++ b/README.md
@@ -256,6 +256,18 @@ The default behavior for array fields is a list of text inputs with add/remove b
 
 See the "Arrays" section of the demo app and [this issue](https://github.com/mozilla-services/react-jsonschema-form/issues/41) for more information.
 
+### Autogenerated widget ids
+
+By default, the lib will generate ids unique to the form for all rendered widgets. But if you plan on using multiple instances of the `Form` component in a same page, it's wise to declare a root prefix for these, using the `ui:rootFieldId` uiSchema directive:
+
+```js
+const uiSchema = {
+  "ui:rootFieldId": "myform"
+};
+```
+
+So all widgets will have an id prefixed with `myform`.
+
 ### Form action buttons
 
 You can provide custom buttons to your form via the `Form` component's `children`. A default submit button will be rendered if you don't provide children to the `Form` component.
diff --git a/src/components/Form.js b/src/components/Form.js
index 0f162569fe..255ccc49a6 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -31,12 +31,13 @@ export default class Form extends Component {
 
   getStateFromProps(props) {
     const schema = "schema" in props ? props.schema : this.props.schema;
+    const uiSchema = "uiSchema" in props ? props.uiSchema : this.props.uiSchema;
     const edit = !!props.formData;
     const {definitions} = schema;
-    const formData = getDefaultFormState(schema, props.formData, definitions) || null;
+    const formData = getDefaultFormState(schema, props.formData, definitions);
     const errors = edit ? this.validate(formData, schema) : [];
     const errorSchema = toErrorSchema(errors);
-    const idSchema = toIdSchema(schema, undefined, definitions);
+    const idSchema = toIdSchema(schema, uiSchema["ui:rootFieldId"], definitions);
     return {status: "initial", formData, edit, errors, errorSchema, idSchema};
   }
 
diff --git a/test/uiSchema_test.js b/test/uiSchema_test.js
index 6d793f7b3f..dbcdbbbc8c 100644
--- a/test/uiSchema_test.js
+++ b/test/uiSchema_test.js
@@ -473,4 +473,65 @@ describe("uiSchema", () => {
       });
     });
   });
+
+  describe("custom root field id", () => {
+    it("should use a custom root field id for objects", () => {
+      const schema = {
+        type: "object",
+        properties: {
+          foo: {type: "string"},
+          bar: {type: "string"},
+        }
+      };
+      const uiSchema = {"ui:rootFieldId": "myform"};
+      const {node} = createFormComponent({schema, uiSchema});
+
+      const ids = [].map.call(node.querySelectorAll("input[type=text]"),
+                              node => node.id);
+      expect(ids).eql(["myform_foo", "myform_bar"]);
+    });
+
+    it("should use a custom root field id for arrays", () => {
+      const schema = {
+        type: "array",
+        items: {type: "string"},
+      };
+      const uiSchema = {"ui:rootFieldId": "myform"};
+      const {node} = createFormComponent({schema, uiSchema, formData: [
+        "foo",
+        "bar"
+      ]});
+
+      const ids = [].map.call(node.querySelectorAll("input[type=text]"),
+                              node => node.id);
+      expect(ids).eql(["myform_0", "myform_1"]);
+    });
+
+    it("should use a custom root field id for array of objects", () => {
+      const schema = {
+        type: "array",
+        items: {
+          type: "object",
+          properties: {
+            foo: {type: "string"},
+            bar: {type: "string"},
+          }
+        },
+      };
+      const uiSchema = {"ui:rootFieldId": "myform"};
+      const {node} = createFormComponent({schema, uiSchema, formData: [
+        {foo: "foo1", bar: "bar1"},
+        {foo: "foo2", bar: "bar2"},
+      ]});
+
+      const ids = [].map.call(node.querySelectorAll("input[type=text]"),
+                              node => node.id);
+      expect(ids).eql([
+        "myform_0_foo",
+        "myform_0_bar",
+        "myform_1_foo",
+        "myform_1_bar"
+      ]);
+    });
+  });
 });

From 831b244257f64c0b94f33b2a35de1544287fd89c Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Tue, 29 Mar 2016 10:07:52 +0200
Subject: [PATCH 19/19] Updated readme toc.

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 9f08d9c5d7..fb3fd7f87f 100644
--- a/README.md
+++ b/README.md
@@ -25,6 +25,7 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
      - [Custom CSS class names](#custom-css-class-names)
      - [Custom labels for enum fields](#custom-labels-for-enum-fields)
      - [Multiple choices list](#multiple-choices-list)
+     - [Autogenerated widget ids](#autogenerated-widget-ids)
      - [Form action buttons](#form-action-buttons)
   - [Advanced customization](#advanced-customization)
      - [Custom widget components](#custom-widget-components)