How to create textfield like material design textbox

Support
#1

I want to implement the material design like Textbox, When user click on textbox the placeholder will move upwards as label .

e.g you can see in google site they did like this, even bootstrap has floating label textbox

#3

Hello!

I think there are two ways to implement floating label.

  1. Place TextField and Label in CssLayout with custom styles.
  2. Write styles for input pseudo element - placeholder (option not checked).

I’ve prepared example for the first option.

XML

<cssLayout id="tfContainer" stylename="tf-container">
    <textField id="textField" stylename="tf-input" inputPrompt="hidden_placeholder"/>
    <label id="label" value="Label" stylename="tf-label"/>
</cssLayout>

Styles in the extended Helium theme.

.tf-container {
  position: relative;
  height: 1.5 * $v-unit-size;

  .tf-label {
    bottom: 0;
    left: 0;
    position: absolute;
    padding: he-input-padding($v-unit-size);
    transform-origin: 0 0;
    transition: all 0.3s ease;
  }
  .tf-input {
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    position: absolute;
    bottom: 0;
  }
  .tf-input::placeholder {
    opacity: 0;
  }
  .tf-input:not(:placeholder-shown) + .tf-label,
  .tf-input:focus + .tf-label {
    transform: translateY(-$v-unit-size) scale(.9);
    padding-bottom: 0;
  }

floating-label

Unfortunately we cannot implement floating label in TextField with caption. TextField caption on the client-side has a separated element. Using CSS we cannot change attributes of this element when field focused.

2 Likes