Xamarin Text Input Layout | Floating Label Entry

Use Xamarin.Forms Text Input Layout to modernize Entry

The only component that provides a modern look to your Entry with floating label in iOS, Android, and UWP.

Give provision to show/hide the password interactively. Never allow the user to be stuck with an incorrect password!

Display more information elegantly with icons, help text, hint and error message in a compact space.

Download

Overview

The Xamarin Text Input Layout is a container control that lets you add a password toggle icon to show or hide passwords, leading and trailing icons, and assistive labels such as floating label, hint, error, and help text on top of SfNumericTextBox, SfMaskedEdit, SfAutoComplete, SfComboBox and the Xamarin.Forms framework’s Entry, and Editor controls.

Supported input controls

Enhance the appearance of numeric entry, masked input, autocomplete, combo box, entry and editor controls, and also add assistive labels and icons to those input views without writing much code to arrange and position those elements by wrapping the entry and input views with the Text Input Layout control.

Container types

Choose any of the containers (filled, outlined, and none) that best match your app’s style.

Shows the container type in Xamarin.Forms entry with floating label

States

Indicate the focused, unfocused, error, and disabled states of the control.

Shows the Xamarin.Forms floating label states focused, unfocused, error, and disabled.

Password visibility toggling

Enable the password toggle icon to show or hide the password interactively.

Shows password visibility toggling icon in Xamarin.Forms Entry control.

Assistive labels

Assistive labels provide more information about the input text.

Shows hints or floating labels in Xamarin.Forms Entry, Masked Input, Numeric Entry, and Editor controls.

Floating labels and hints

Avoid additional labels by adding hint text, providing more space to the input view. The hint text moves from the middle to the top to show a floating label when the input becomes active.

Shows helper text in Xamarin.Forms Entry, Masked Input, Numeric Entry, and Editor controls.

Helper text

Helper text provides additional information about the text to be entered.

Shows error text in Xamarin.Forms Entry, Masked Input, Numeric Entry, and Editor controls.

Error text

Displaying error text can assist in solving validation errors.

Shows character count in Xamarin.Forms Entry, Masked Input, Numeric Entry, and Editor controls.

Character count

The maximum characters to be entered in the text field can be displayed.

Leading and trailing icons

Add a leading icon to indicate the input type, such as birth date, phone number, and password. Use a trailing icon to add a clear button, error icon, voice input icon, or drop-down icon.

Shows leading and trailing icons in Xamarin.Forms Entry, Masked Input, Numeric Entry, and Editor controls.

Colors

Apply appealing colors to all the elements of the Text Input Layout control to match your app theme.

Customize the colors of container, focused, unfocused, and error states.

Custom fonts

Customize the font family, font size, and font attributes for the hint text, error text, helper text, and counter label.

Customize the font for the text input layout.

Padding

Customize the padding around the input view.

Customize the padding for input view.

RTL

Renders the control in the right-to-left direction for the required cultures.

RTL support for text input layout

What do our customers say about us?

A creator of online tutorials for Microsoft technologies, your controls helped to provide a rich user experience. I wanted a look and feel like a Windows Store app and the Tiles are useful for that.

Microsoft MVP

We're using the file formats and Windows/JavaScript list controls a lot. They're fast, easy to use, and the documentation is good and contains examples. Tickets with questions or suggestions were answered within a day, so we're happy to use the Syncfusion libraries.

Daniel Persidok

wpd onshore GmbH & Co. KG