Using 'ui:order' to avoid field name collisions.

README.md

@@ -117,7 +117,7 @@ Here's a list of supported alternative widgets for different JSONSchema data typ
 
 ## Object fields ordering
 
-The `uiSchema` object spec also allows you to define in which order a given object field properties should be rendered using the `order` property:
+The `uiSchema` object spec also allows you to define in which order a given object field properties should be rendered using the `ui:order` property:
 
 ```jsx
 const schema = {
@@ -129,12 +129,11 @@ const schema = {
 };
 
 const uiSchema = {
-  order: ["bar", "foo"]
+  "ui:order": ["bar", "foo"]
 };
 
 render((
-  <Form schema={schema}
-        uiSchema={uiSchema} />
+  <Form schema={schema} uiSchema={uiSchema} />
 ), document.getElementById("app"));
 ```
 

playground/samples/ordering.js

@@ -27,7 +27,7 @@ module.exports = {
     }
   },
   uiSchema: {
-    order: ["firstName", "lastName", "age", "bio", "password"],
+    "ui:order": ["firstName", "lastName", "age", "bio", "password"],
     age: {
       widget: "updown"
     },

src/components/fields/ObjectField.js

@@ -42,7 +42,7 @@ class ObjectField extends Component {
     const SchemaField = this.props.SchemaField;
     try {
       var orderedProperties = orderProperties(
-        Object.keys(schema.properties), uiSchema.order);
+        Object.keys(schema.properties), uiSchema["ui:order"]);
     } catch(err) {
       return (
         <p className="config-error" style={{color: "red"}}>

test/index_test.js

@@ -72,7 +72,7 @@ describe("Form", () => {
 
     it("should use provided order", () => {
       const {node} = createComponent({schema, uiSchema: {
-        order: ["bar", "foo"]
+        "ui:order": ["bar", "foo"]
       }});
       const labels = [].map.call(
         node.querySelectorAll(".field > label"), l => l.textContent);
@@ -82,7 +82,7 @@ describe("Form", () => {
 
     it("should throw when order list length mismatches", () => {
       const {node} = createComponent({schema, uiSchema: {
-        order: ["bar", "foo", "baz?"]
+        "ui:order": ["bar", "foo", "baz?"]
       }});
 
       expect(node.querySelector(".config-error").textContent)
@@ -91,7 +91,7 @@ describe("Form", () => {
 
     it("should throw when order and properties lists differs", () => {
       const {node} = createComponent({schema, uiSchema: {
-        order: ["bar", "wut?"]
+        "ui:order": ["bar", "wut?"]
       }});
 
       expect(node.querySelector(".config-error").textContent)