diff --git a/components/Form/FormComponents.css b/components/Form/FormComponents.css
index 444daa4f8..df7b487a9 100644
--- a/components/Form/FormComponents.css
+++ b/components/Form/FormComponents.css
@@ -54,6 +54,16 @@
width: auto;
}
+
+.placeholder {
+ display: block;
+ composes: fontRegular from '../../globals/typography.css';
+ color: var(--color-greyLight);
+ text-align: center;
+ display: inline-block;
+ width: auto;
+}
+
.error {
color: var(--color-danger);
}
@@ -63,6 +73,7 @@
* + .headline,
* + .label,
* + .value,
+* + .placeholder,
* + .inputWrapper {
margin-top: var(--size-sm-ii);
}
@@ -74,6 +85,7 @@
.headline + .meta,
.headline + .description,
.headline + .value,
+.headline + .placeholder,
.headline + .inputWrapper {
margin-top: var(--size-sm-i);
}
diff --git a/components/Form/FormComponents.js b/components/Form/FormComponents.js
index 4ed9c831c..50b2485e9 100644
--- a/components/Form/FormComponents.js
+++ b/components/Form/FormComponents.js
@@ -53,6 +53,12 @@ export const Value = ({ className, children }) => (
);
+export const Placeholder = ({ className, children }) => (
+
+ { children }
+
+);
+
export const InputWrapper = ({ className, children }) => (
{ children }
diff --git a/components/Form/FormComponents.story.js b/components/Form/FormComponents.story.js
index dd17ef184..44e1d652b 100644
--- a/components/Form/FormComponents.story.js
+++ b/components/Form/FormComponents.story.js
@@ -7,6 +7,7 @@ import {
Description,
Label,
Value,
+ Placeholder,
} from './FormComponents';
const stories = storiesOf('FormComponents', module);
@@ -35,4 +36,7 @@ stories.add('Field', () => (
))
.add('Value', () => (
900sq ft - 1500 sq ft
+))
+.add('Placeholder', () => (
+
Any size
));
\ No newline at end of file
diff --git a/components/Form/InputField/InputField.js b/components/Form/InputField/InputField.js
index c7570f815..300779feb 100644
--- a/components/Form/InputField/InputField.js
+++ b/components/Form/InputField/InputField.js
@@ -5,6 +5,7 @@ import {
Meta,
Label,
Value,
+ Placeholder,
Description,
InputWrapper,
} from '../FormComponents';
@@ -29,6 +30,7 @@ export default class InputField extends Component {
children: PropTypes.element,
error: PropTypes.node,
valueReplay: PropTypes.node,
+ placeholder: PropTypes.node,
required: PropTypes.bool,
optionalLabel: PropTypes.string,
};
@@ -49,6 +51,7 @@ export default class InputField extends Component {
classNames,
error,
valueReplay,
+ placeholder,
required,
optionalLabel,
...rest,
@@ -75,7 +78,14 @@ export default class InputField extends Component {
>
{ label }
- { valueReplay && (
+ { !valueReplay && placeholder ? (
+
+ { placeholder }
+
+ ) : (