diff --git a/components/input/Input.js b/components/input/Input.js
index 4038bef5..9b8dd929 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -184,7 +184,7 @@ const factory = (FontIcon) => {
{required ? * : null}
: null}
- {hint ? {hint} : null}
+ {hint ? {hint} : null}
{error ? {error} : null}
{maxLength ? {length}/{maxLength} : null}
{children}
diff --git a/components/input/theme.scss b/components/input/theme.scss
index b6b6c813..9e29b9b4 100644
--- a/components/input/theme.scss
+++ b/components/input/theme.scss
@@ -46,6 +46,7 @@
color: $input-text-required-color;
}
~ .hint {
+ display: block;
opacity: $input-hint-opacity;
}
~ .icon {
@@ -57,6 +58,9 @@
top: $input-focus-label-top;
font-size: $input-label-font-size;
}
+ &.filled ~ .hint {
+ opacity: 0;
+ }
}
&.filled ~ .label.fixed, &.filled ~ .hint {
display: none;
@@ -87,7 +91,7 @@
line-height: $input-field-font-size;
color: $input-text-label-color;
pointer-events: none;
- opacity: 0;
+ opacity: $input-hint-opacity;
transition-timing-function: $animation-curve-default;
transition-duration: $animation-duration;
transition-property: opacity;
diff --git a/docs/app/components/layout/main/modules/examples/input_example_1.txt b/docs/app/components/layout/main/modules/examples/input_example_1.txt
index d4a89a62..70327ee9 100644
--- a/docs/app/components/layout/main/modules/examples/input_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/input_example_1.txt
@@ -1,5 +1,5 @@
class InputTest extends React.Component {
- state = { name: '', phone: '', multiline: '', email: '', hint: '' };
+ state = { name: '', phone: '', multiline: '', email: '', hint: '', label: '' };
handleChange = (name, value) => {
this.setState({...this.state, [name]: value});
@@ -9,6 +9,7 @@ class InputTest extends React.Component {
return (