Repository: mozilla-services/react-jsonschema-form
Pull request #558 (2017-04-22 09:36:40)

Add UI option for omitting field label
### Reasons for making this change

Sometimes you may want to render fields without label associated with them.

While it's possible to control the rendering of the field by creating a custom field template, or by hiding the label using CSS, they both feel non-ideal for basic use cases where you simply want to get rid of the label.

This PR introduces a new `label` option within `ui:options`. Setting the `label` to `false` will omit the label. The option won't have any effect on fields where the label is omitted already, even if it's set to `true`.

```jsx
const schema = {type: "string"};
const uiSchema = {
  "ui:options": {
    label: false
  }
};
```

I'm not sure if `ui:options` -> `label` is the best place put this under. Instead of `ui:showLabel` or `ui:hideLabel` I went with this solution to potentially support other than boolean values. For example, some `label` value could support rendering the label for screenreaders only.

After making the change, I noticed this subject has been discussed before in https://github.com/mozilla-services/react-jsonschema-form/pull/51

### Checklist

* [x] **I'm updating documentation**
  - [x] I've checked the rendering of the Markdown text I've added
  - [x] If I'm adding a new section, I've updated the Table of Content
* [x] **I'm adding or updating code**
  - [x] I've added and/or updated tests
  - [x] I've updated docs if needed
  - [x] I've run `npm run cs-format` on my branch to conform my code to [prettier](https://github.com/prettier/prettier) coding style
* [x] **I'm adding a new feature**
  - [ ] I've updated the playground with an example use of the feature



Patch:
diff --git a/README.md b/README.md
index 7f6ce4f80..aa4953efe 100644
--- a/README.md
+++ b/README.md
@@ -48,6 +48,7 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
      - [Auto focus](#auto-focus)
      - [Textarea rows option](#textarea-rows-option)
      - [Placeholders](#placeholders)
+     - [Field labels](#field-labels)
      - [Form attributes](#form-attributes)
   - [Advanced customization](#advanced-customization)
      - [Field template](#field-template)
@@ -686,6 +687,19 @@ const uiSchema = {
 };
 ```
 
+### Field labels
+
+Field labels are rendered by default. Labels may be omitted by setting the `label` option to `false` from `ui:options` uiSchema directive.
+
+```jsx
+const schema = {type: "string"};
+const uiSchema = {
+  "ui:options": {
+    label: false
+  }
+};
+```
+
 ### Form attributes
 
 Form component supports the following html attributes:
diff --git a/src/components/fields/SchemaField.js b/src/components/fields/SchemaField.js
index be11f4bd9..5ed8eb4dc 100644
--- a/src/components/fields/SchemaField.js
+++ b/src/components/fields/SchemaField.js
@@ -4,6 +4,7 @@ import {
   isMultiSelect,
   retrieveSchema,
   getDefaultRegistry,
+  getUiOptions,
   isFilesArray,
   deepEquals,
 } from "../../utils";
@@ -149,7 +150,8 @@ function SchemaFieldRender(props) {
     return <div />;
   }
 
-  let displayLabel = true;
+  const uiOptions = getUiOptions(uiSchema);
+  let { label: displayLabel = true } = uiOptions;
   if (schema.type === "array") {
     displayLabel = isMultiSelect(schema) || isFilesArray(schema, uiSchema);
   }


Test patch:
diff --git a/test/SchemaField_test.js b/test/SchemaField_test.js
index 4147bcae7..153d748d6 100644
--- a/test/SchemaField_test.js
+++ b/test/SchemaField_test.js
@@ -162,6 +162,38 @@ describe("SchemaField", () => {
     });
   });
 
+  describe("label support", () => {
+    const schema = {
+      type: "object",
+      properties: {
+        foo: { type: "string" },
+      },
+    };
+
+    it("should render label by default", () => {
+      const { node } = createFormComponent({ schema });
+      expect(node.querySelectorAll("label")).to.have.length.of(1);
+    });
+
+    it("should render label if ui:options label is set to true", () => {
+      const uiSchema = {
+        foo: { "ui:options": { label: true } },
+      };
+
+      const { node } = createFormComponent({ schema, uiSchema });
+      expect(node.querySelectorAll("label")).to.have.length.of(1);
+    });
+
+    it("should not render label if ui:options label is set to false", () => {
+      const uiSchema = {
+        foo: { "ui:options": { label: false } },
+      };
+
+      const { node } = createFormComponent({ schema, uiSchema });
+      expect(node.querySelectorAll("label")).to.have.length.of(0);
+    });
+  });
+
   describe("description support", () => {
     const schema = {
       type: "object",