diff --git a/client/src/app/demo/components-demo-page.js b/client/src/app/demo/components-demo-page.js
index 0cf3aee0..e5fb3b7d 100644
--- a/client/src/app/demo/components-demo-page.js
+++ b/client/src/app/demo/components-demo-page.js
@@ -35,13 +35,13 @@ let DemoPage = React.createClass({
{
title: 'Input',
render: (
-
+
)
},
{
title: 'Input wrapped in a label',
render: (
-
+
)
},
{
diff --git a/client/src/core-components/input.js b/client/src/core-components/input.js
index ce652a31..66b497d0 100644
--- a/client/src/core-components/input.js
+++ b/client/src/core-components/input.js
@@ -13,7 +13,8 @@ const Input = React.createClass({
inputType: React.PropTypes.string,
password: React.PropTypes.bool,
required: React.PropTypes.bool,
- icon: React.PropTypes.string
+ icon: React.PropTypes.string,
+ error: React.PropTypes.string
},
getDefaultProps() {
@@ -28,10 +29,21 @@ const Input = React.createClass({
{this.props.label}
{this.renderIcon()}
+ {this.renderError()}
);
},
+ renderError() {
+ let error = null;
+
+ if (this.props.error){
+ error = {this.props.error} ;
+ }
+
+ return error;
+ },
+
renderIcon() {
let icon = null;
@@ -57,6 +69,7 @@ const Input = React.createClass({
let classes = {
'input': true,
'input_with-icon': (this.props.icon),
+ 'input_with-error': (this.props.error),
['input_' + this.props.inputType]: true,
[this.props.className]: (this.props.className)
diff --git a/client/src/core-components/input.scss b/client/src/core-components/input.scss
index c952fd45..dfd7be3a 100644
--- a/client/src/core-components/input.scss
+++ b/client/src/core-components/input.scss
@@ -42,13 +42,26 @@
position: absolute;
margin: 1px;
padding: 8px 12px;
+ border-bottom-left-radius: 3px;
+ border-top-left-radius: 3px;
background-color: #eee;
}
.input__text {
- border-bottom-left-radius: 0;
- border-top-left-radius: 0;
padding-left: 40px;
}
}
+
+ &_with-error {
+ .input__error {
+ color: red;
+ font-size: $font-size--sm;
+ display: block;
+ position: absolute;
+ }
+ .input__text {
+ border: 1px solid red;
+ }
+ }
+
}
\ No newline at end of file