Добавил LabeledInput в Form

src/components/ui/Form.jsx

@@ -70,6 +70,62 @@ export class Input extends Component {
     }
 }
 
+export class LabeledInput extends Component {
+    static displayName = 'LabeledInput';
+
+    static propTypes = {
+        label: PropTypes.oneOfType([
+            PropTypes.shape({
+                id: PropTypes.string
+            }),
+            PropTypes.string
+        ]).isRequired,
+        id: PropTypes.string,
+        icon: PropTypes.string,
+        skin: PropTypes.oneOf(['dark', 'light']),
+        color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue'])
+    };
+
+    static contextTypes = {
+        intl: intlShape.isRequired
+    };
+
+    render() {
+        let { label } = this.props;
+
+        let props = Object.assign({}, this.props);
+
+        if (!props.id) {
+            props.id = uniqueId('input');
+        }
+
+        if (label && label.id) {
+            label = this.context.intl.formatMessage(label);
+        }
+
+        return (
+            <div className={styles.formLabeledRow}>
+                <label className={styles.textFieldLabel} htmlFor={props.id}>
+                    {label}
+                </label>
+                <Input ref={this.setEl} {...props} />
+            </div>
+        );
+    }
+
+    setEl = (el) => {
+        this.el = el;
+    };
+
+    getValue() {
+        return this.el.getValue();
+    }
+
+    focus() {
+        this.el.focus();
+    }
+}
+
 export class Checkbox extends Component {
     static displayName = 'Checkbox';
 
@@ -185,3 +241,9 @@ export class Form extends Component {
         }
     };
 }
+
+
+let lastId = 0;
+function uniqueId(prefix = 'id') {
+    return `${prefix}${++lastId}`;
+}

src/components/ui/form.scss

@@ -111,6 +111,12 @@
     @include form-transition();
 }
 
+.textFieldLabel {
+    font-family: $font-family-title;
+    color: #666;
+    font-size: 18px;
+}
+
 @include input-theme('green', $green);
 @include input-theme('blue', $blue);
 @include input-theme('red', $red);