diff --git a/README.md b/README.md
index e316b86ec8..7d4f32d9fb 100644
--- a/README.md
+++ b/README.md
@@ -104,6 +104,7 @@ Here's a list of supported alternative widgets for different JSONSchema data typ
#### `string`:
* `textarea`: a `textarea` element;
+ * `password`: an `input[type=password]` element;
* by default, a regular `input[type=text]` element is used.
#### `number` and `integer`:
diff --git a/playground/samples/nested.js b/playground/samples/nested.js
index 54da1cac34..8bce1dff8b 100644
--- a/playground/samples/nested.js
+++ b/playground/samples/nested.js
@@ -10,9 +10,9 @@ module.exports = {
},
tasks: {
type: "array",
+ title: "Tasks",
items: {
type: "object",
- title: "Task",
required: ["title"],
properties: {
title: {
diff --git a/playground/samples/simple.js b/playground/samples/simple.js
index 660e56f587..3ebb047ff6 100644
--- a/playground/samples/simple.js
+++ b/playground/samples/simple.js
@@ -1,20 +1,47 @@
module.exports = {
schema: {
- title: "A simple todo entry",
+ title: "A registration form",
type: "object",
- required: ["title"],
+ required: ["firstName", "lastName"],
properties: {
- title: {type: "string", title: "Title", default: "A new task"},
- done: {type: "boolean", title: "Done?", default: false}
+ firstName: {
+ type: "string",
+ title: "First name",
+ },
+ lastName: {
+ type: "string",
+ title: "Last name",
+ },
+ age: {
+ type: "integer",
+ title: "Age"
+ },
+ bio: {
+ type: "string",
+ title: "Bio",
+ },
+ password: {
+ type: "string",
+ title: "Password"
+ }
}
},
uiSchema: {
- done: {
- widget: "radio"
+ age: {
+ widget: "updown"
+ },
+ bio: {
+ widget: "textarea"
+ },
+ password: {
+ widget: "password"
}
},
formData: {
- title: "My task",
- done: false
+ firstName: "Chuck",
+ lastName: "Norris",
+ age: 75,
+ bio: "Roundhouse kicking asses since 1940",
+ password: "noneed",
}
};
diff --git a/playground/styles.css b/playground/styles.css
index 9448f6383d..af82d707ee 100644
--- a/playground/styles.css
+++ b/playground/styles.css
@@ -2,9 +2,14 @@
width: 200px;
}
-.rjsf input[type=text], .rjsf textarea {
+.rjsf input[type=text],
+.rjsf input[type=number],
+.rjsf input[type=password],
+.rjsf input[type=range],
+.rjsf textarea,
+.rjsf select {
font-weight: normal;
- width: 350px;
+ width: 320px;
}
.rjsf textarea {
diff --git a/src/components/fields/ArrayField.js b/src/components/fields/ArrayField.js
index 27dd908f5a..9b795b8ea0 100644
--- a/src/components/fields/ArrayField.js
+++ b/src/components/fields/ArrayField.js
@@ -63,7 +63,7 @@ class ArrayField extends Component {
render() {
const {schema, uiSchema, name} = this.props;
- const title = name || schema.title;
+ const title = schema.title || name;
const {items} = this.state;
return (