diff --git a/README.md b/README.md
index c6e57d44a..f84ed666e 100644
--- a/README.md
+++ b/README.md
@@ -368,6 +368,23 @@ var options = {
}
```
+
+##### Checkbox field
+
+To specify a checkbox field use: `type: "checkbox"`
+The `prefill` value can determine the default state of the checkbox and it is required.
+
+```js
+var options = {
+ additionalSignUpFields: [{
+ type: "checkbox",
+ name: "newsletter",
+ prefill: "true",
+ placeholder: "I hereby agree that I want to receive marketing emails from your company",
+ }]
+}
+```
+
#### Avatar provider
Lock can show avatars fetched from anywhere. A custom avatar provider can be specified with the `avatar` option by passing an object with the keys `url` and `displayName`. Both properties are functions that take an email and a callback function.
diff --git a/css/index.styl b/css/index.styl
index 6c2dda7a6..ef48ce432 100644
--- a/css/index.styl
+++ b/css/index.styl
@@ -386,7 +386,19 @@ tabsHeight = 40px
.auth0-lock-error .auth0-lock-input-wrap
border-color red
transition .3s ease-in-out
-
+ .auth0-lock-input-checkbox
+ text-align left
+ display block
+ font-size 12px
+ color rgba(0,0,0,0.54)
+ line-height 22px
+ position relative
+ label input
+ float left
+ margin-top 5px
+ span
+ display block
+ margin-left 20px
// Social
diff --git a/src/__tests__/field/__snapshots__/custom_input.test.jsx.snap b/src/__tests__/field/__snapshots__/custom_input.test.jsx.snap
index f9e50e9c0..c63c02a91 100644
--- a/src/__tests__/field/__snapshots__/custom_input.test.jsx.snap
+++ b/src/__tests__/field/__snapshots__/custom_input.test.jsx.snap
@@ -1,4 +1,20 @@
-exports[`CustomInput when type !== select calls \`changeField\` when changed 1`] = `
+exports[`CustomInput when type == checkbox renders correctly as a CheckBoxInput 1`] = `
+
+
+
+`;
+
+exports[`CustomInput when type == input calls \`changeField\` when changed 1`] = `
Array [
1,
"custom_input",
@@ -7,7 +23,7 @@ Array [
]
`;
-exports[`CustomInput when type !== select renders correctly as a TextInput 1`] = `
+exports[`CustomInput when type == input renders correctly as a TextInput 1`] = `
`;
-exports[`CustomInput when type !== select sets isValid as true when \`isFieldVisiblyInvalid\` is false 1`] = `
+exports[`CustomInput when type == input sets isValid as true when \`isFieldVisiblyInvalid\` is false 1`] = `
{
expect(mock.calls[0]).toMatchSnapshot();
});
});
- describe('when type !== select', () => {
+ describe('when type == input', () => {
beforeEach(() => defaultProps.type = 'input');
it('renders correctly as a TextInput', () => {
const CustomInput = getComponent();
@@ -109,4 +109,17 @@ describe('CustomInput', () => {
expect(mock.calls[0]).toMatchSnapshot();
});
});
+ describe('when type == checkbox', () => {
+ beforeEach(() => defaultProps.type = 'checkbox');
+ it('renders correctly as a CheckBoxInput', () => {
+ const CustomInput = getComponent();
+
+ expectComponent(
+
+ ).toMatchSnapshot();
+ });
+ });
+
});
diff --git a/src/connection/database/index.js b/src/connection/database/index.js
index caacb25b3..3cdab19f4 100644
--- a/src/connection/database/index.js
+++ b/src/connection/database/index.js
@@ -108,7 +108,7 @@ function processDatabaseOptions(opts) {
prefill = undefined;
}
- const types = ["select", "text"];
+ const types = ["select", "text", "checkbox"];
if (type != undefined && (typeof type != "string" || types.indexOf(type) === -1)) {
l.warn(opts, `When provided, the \`type\` property of an element of \`additionalSignUpFields\` must be one of the following strings: "${types.join("\", \"")}".`);
type = undefined;
diff --git a/src/field/custom_input.jsx b/src/field/custom_input.jsx
index b56baa688..152a7ce06 100644
--- a/src/field/custom_input.jsx
+++ b/src/field/custom_input.jsx
@@ -8,6 +8,7 @@ import {
} from './index';
import TextInput from '../ui/input/text_input';
import SelectInput from '../ui/input/select_input';
+import CheckboxInput from '../ui/input/checkbox_input';
import * as l from '../core/index';
const CustomInput = ({iconUrl, model, name, placeholder, type, validator}) => {
@@ -16,7 +17,7 @@ const CustomInput = ({iconUrl, model, name, placeholder, type, validator}) => {
isValid: !isFieldVisiblyInvalid(model, name),
name,
placeholder
- }
+ };
switch(type) {
case "select":
@@ -27,6 +28,14 @@ const CustomInput = ({iconUrl, model, name, placeholder, type, validator}) => {
onClick={() => startOptionSelection(l.id(model), name, iconUrl)}
/>
);
+ case "checkbox":
+ return (
+ changeField(l.id(model), name, `${e.target.checked}`, validator)}
+ checked={getFieldValue(model, name)}
+ {...props}
+ />
+ );
default:
return (
+
+