Introducing the New .NET MAUI Text Input Layout
Tags: dotnet, csharp, mobile, android
Published: 2023-01-10 13:25:30

---
title: Introducing the New .NET MAUI Text Input Layout
published: true
date: 2023-01-06 11:37:42 UTC
tags: dotnet, csharp, mobile, android
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-text-input-layout.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khmxd6bo0mgx1ifu816g.png
---
A text input layout control was one of the most-requested controls by our mobile app developers. We understand the requirement for this essential control and have now delivered the [.NET MAUI Text Input Layout](https://www.syncfusion.com/maui-controls/maui-textinputlayout "Syncfusion .NET MAUI Text Input Layout") control in our [2022 Volume 4](https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download "Essential Studio 2022 Volume 4 Main Release") release.

This control can be used to build UIs that require user input. It allows users to add floating labels, password toggle icons, leading and trailing icons, and assistive labels such as error messages and help text on top of the input controls. These features help improve the interface’s usability and make it easier for users to enter and submit information.

In this article, we will see the key features of the new .NET MAUI Text Input Layout and the steps to get started with it.

## Key features

The .NET MAUI Text Input Layout supports numerous user-friendly features. Some of them are listed here.

- [Supported input controls](#supported-input-controls)
- [Container types](#container-types)
- [Supported states](#supported-states)
- [Toggling password visibility](#toggling-password-visibility)
- [Floating labels and hints](#floating-labels-and-hints)
- [Helper text](#helper-text)
- [Error text](#error-text)
- [Leading and trailing icons](#leading-and-trailing-icons)

### <a name="supported-input-controls">Supported input controls</a>

The .NET MAUI Text Input Layout control can enhance the appearance and functionality of the Syncfusion [Autocomplete](https://www.syncfusion.com/maui-controls/maui-autocomplete "Syncfusion .NET MAUI Autocomplete") or [ComboBox](https://www.syncfusion.com/maui-controls/maui-combobox "Syncfusion .NET MAUI ComboBox") controls, and the Microsoft [Entry](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/entry?view=net-maui-7.0 ".NET MAUI Framework Entry control documentation") and [Editor](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/editor?view=net-maui-7.0 ".NET MAUI Framework Editor control documentation") controls in the .NET MAUI framework.

By wrapping these input views with the Text Input Layout, you can easily add assistive labels and icons to improve your app’s usability and visual appeal.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/NET-MAUI-Text-Input-Layouts-Supported-Input-Controls.png" alt=".NET MAUI Text Input Layout’s Supported Input Controls" style="width:100%">

  <figcaption>.NET MAUI Text Input Layout’s Supported Input Controls</figcaption>

</figure>

### <a name="container-types">Container types</a>

The .NET MAUI Text Input Layout supports the following container types:

- **Filled:** The background of the input view will fill with the container color, and the baseline stroke and thickness will change based on the state of the input view.
- **Outlined:** The container will be framed with a rounded border.
- **None:** The container will have an empty background and space around it.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/NET-MAUI-Text-Input-Layouts-Container-Types.png" alt=".NET MAUI Text Input Layout's Container Types" style="width:100%">

  <figcaption>.NET MAUI Text Input Layout's Container Types</figcaption>

</figure>

### <a name="supported-states">Supported states</a>

The .NET MAUI Text Input Layout supports the focused, unfocused, error, and disabled visual states.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/NET-MAUI-Text-Input-Layouts-Supported-States.png" alt=".NET MAUI Text Input Layout’s Supported States" style="width:100%">

  <figcaption>.NET MAUI Text Input Layout’s Supported States</figcaption>

</figure>

### <a name="toggling-password-visibility">Toggling password visibility</a>

You can enable the password toggle icon to show or hide a password interactively.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Password-Visibility-Toggling-in-.NET-MAUI-Text-Input-Layout.gif" alt="Password Visibility Toggling in .NET MAUI Text Input Layout" style="width:100%">

  <figcaption>Password Visibility Toggling in .NET MAUI Text Input Layout</figcaption>

</figure>

### <a name="floating-labels-and-hints">Floating labels and hints</a>

Use the hint text feature to add placeholder text to the input view. This hint text will be displayed in the middle of the input view and will move to the top to become a floating label when the input field becomes active. This can help save space and avoid the need for additional titles.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Floating-Labels-and-Hints-in-.NET-MAUI-Text-Input-Layout.gif" alt="Floating Labels and Hints in .NET MAUI Text Input Layout" style="width:100%">

  <figcaption>Floating Labels and Hints in .NET MAUI Text Input Layout</figcaption>

</figure>

### <a name="helper-text">Helper text</a>

In addition to the hint text, the Text Input Layout control also provides a helper text feature. It allows you to display additional information about the text that is expected to be entered. This can be useful for giving instructions or examples to help users understand how to correctly enter details in the input field.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Helper-Text-in-.NET-MAUI-Text-Input-Layout.png" alt="Helper Text in .NET MAUI Text Input Layout" style="width:100%">

  <figcaption>Helper Text in .NET MAUI Text Input Layout</figcaption>

</figure>

### <a name="error-text">Error text</a>

Use the error text feature to display error messages that assist users in solving validation errors. This can improve the usability of your app by providing clear feedback to users when there are problems with their input.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/NET-MAUI-Text-Input-Layout-Displaying-Error-Text.png" alt=".NET MAUI Text Input Layout Displaying Error Text" style="width:100%">

  <figcaption>.NET MAUI Text Input Layout Displaying Error Text</figcaption>

</figure>

### <a name="leading-and-trailing-icons">Leading and trailing icons</a>

You can use leading icons to indicate the expected input type, such as a birth date, phone number, or password. These can help users understand the purpose of the input field and easily enter the appropriate information.

Trailing icons, on the other hand, can be used for various purposes, such as adding a clear button, error icon, voice input icon, or drop-down icon. These can improve the functionality of the input view and make it easier for users to interact with it.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Leading-and-Trailing-Icons-in-.NET-MAUI-Text-Input-Layout.png" alt="Leading and Trailing Icons in .NET MAUI Text Input Layout" style="width:100%">

  <figcaption>Leading and Trailing Icons in .NET MAUI Text Input Layout</figcaption>

</figure>

**Note:** For more details, refer to the [.NET MAUI Text Input Layout documentation](https://help.syncfusion.com/maui/textinputlayout/overview ".NET MAUI Text Input Layout documentation").

## Getting started with the .NET MAUI Text Input Layout control

We have seen the key features of the .NET MAUI Text Input Layout (SfTextInputLayout). Let’s see how to configure it with a floating label.

**Step 1:** First, create [a .NET MAUI application](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android "Building a .NET MAUI app").

**Step 2:** The Syncfusion .NET MAUI controls are available on [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery"). To add the .NET MAUI Text Input Layout control to your project, open the **NuGet package manager** in [Visual Studio](https://visualstudio.microsoft.com/ "Visual Studio"). Search for [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/ "Syncfusion.Maui.Core NuGet Package") and then install it.

**Step 3:** Now, register the handler for the Syncfusion core in the **MauiProgram.cs** file.

```csharp
using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;
namespace TextInputLayoutSample
{
  public static class MauiProgram
  {
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
		.UseMauiApp<App>()
		.ConfigureSyncfusionCore()
		.ConfigureFonts(fonts =>
		{
	           fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
		});
		return builder.Build();
	 }
  }
}
```

**Step 3:** Add **Syncfusion.Maui.Core** namespace in your XAML page.

```
xmlns:inputLayout="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
```

**Step 4:** Then, add any input view control such as Entry, Editor, Autocomplete, or ComboBox to the Text Input Layout.

```xml
<inputLayout:SfTextInputLayout>
   <Entry />
</inputLayout:SfTextInputLayout>
```

**Step 5:** Now, we can add the floating label for the Text Input Layout by setting the **Hint** property with the text you want to display as the label. You can also control the visibility of the hint by setting the **ShowHint** property as true or false. By default, it’s set to true to display the floating label.

Refer to the following code example.

```xml
<inputLayout:SfTextInputLayout Hint="First Name">
   <Entry Text = "Selva Ganapathy Kathiresan"/>
</inputLayout:SfTextInputLayout>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/NET-MAUI-Text-Input-Layout-Displaying-Floating-Label.png" alt=".NET MAUI Text Input Layout Displaying Floating Label" style="width:100%">

  <figcaption>.NET MAUI Text Input Layout Displaying Floating Label</figcaption>

</figure>

## Conclusion

Thanks for reading! In this blog, we’ve seen the features of the new [.NET MAUI Text Input Layout](https://www.syncfusion.com/maui-controls/maui-textinputlayout "Syncfusion .NET MAUI Text Input Layout") control rolled out in the [2022 Volume 4](https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download "Essential Studio 2022 Volume 4 Main Release") release. Information about our other new controls and features is available in our [Release Notes](https://www.syncfusion.com/products/release-history "Syncfusion Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "What’s New in Syncfusion Products") pages. Try them out and leave your feedback in the comments section below!

Download [Essential Studio for .NET MAUI](https://www.syncfusion.com/downloads/maui "Download the Essential Studio for .NET MAUI") to start evaluating them immediately.

If you have any questions or need further assistance, please don’t hesitate to contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://www.syncfusion.com/identity/login "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to help you!

## Related blogs

- [Authenticate a .NET MAUI App with Azure AD](https://www.syncfusion.com/blogs/post/authenticate-the-net-maui-app-with-azure-ad.aspx "Blog: Authenticate a .NET MAUI App with Azure AD")
- [Agenda View in .NET MAUI Scheduler: A Perfect Tool For Modern-Day Office Management](https://www.syncfusion.com/blogs/post/agenda-view-in-net-maui-scheduler-a-perfect-tool-for-modern-day-office-management.aspx "Blog: Agenda View in .NET MAUI Scheduler: A Perfect Tool For Modern-Day Office Management")
- [Achieve Outlook-like Swiping Using .NET MAUI Listview](https://www.syncfusion.com/blogs/post/achieve-outlook-like-swiping-using-net-maui-listview.aspx "Blog: Achieve Outlook-like Swiping Using .NET MAUI Listview")
- [Replicating an Invoice Page UI in .NET MAUI](https://www.syncfusion.com/blogs/post/invoice-page-ui-in-net-maui.aspx "Blog: Replicating an Invoice Page UI in .NET MAUI")
- [How to Draw 2D Graphics in .NET MAUI’s GraphicsView](https://www.syncfusion.com/blogs/post/draw-2d-graphics-in-dotnet-maui-graphicsview.aspx "Blog: How to Draw 2D Graphics in .NET MAUI’s GraphicsView")