Directory

FloatingTextField Add-on

Add-on for floating style placeholder for TextField

View larger

Close

View larger

Close

A Vaadin 8 TextField with a floating style placeholder.

Sample code

// FloatingTextField with validation

FloatingTextField validationField = new FloatingTextField();
validationField.setPlaceholder("Validated field");
binder.forField(validationField)
     .withValidator(new StringLengthValidator(
     "Text must be between 1-10 letters", 1, 10))
            .bind(s -> text, (s, input) -> text = input);

// Styling FloatingTextField placeholder
.floatingTextFieldWidget {
	font-size: 11px;
	transition: top 100ms linear, 
		font-size 100ms ease-out;
}
// Styling FloatingTextField placeholder when field is focused
.floatingTextFieldWidgetFocused > .placeholderSpan > .placeholder {
	font-size: 10px;
	font-weight: 600;
	color: green;
}

// modifying height and width in CSS have to have the !important notion
// to override inline style properties of the HTML elements
.floatingTextFieldWidget, .floatingTextField {
    height: 60px !important;
    width: 200px !important;
}

Links

• Source Code
• Issue Tracker
• Author Home Page

Compatibility