Introducing the New .NET MAUI Text Input Layout | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (172).NET Core  (29).NET MAUI  (192)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (209)BoldSign  (12)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (131)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (882)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (49)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (125)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (613)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (488)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (41)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (368)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (30)Visual Studio Code  (17)Web  (577)What's new  (313)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing the New .NET MAUI Text Input Layout

Introducing the New .NET MAUI Text Input Layout

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 control in our 2022 Volume 4 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

The .NET MAUI Text Input Layout control can enhance the appearance and functionality of the Syncfusion Autocomplete or ComboBox controls, and the Microsoft Entry and Editor 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.

.NET MAUI Text Input Layout’s Supported Input Controls
.NET MAUI Text Input Layout’s Supported Input Controls

Container types

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.
.NET MAUI Text Input Layout's Container Types
.NET MAUI Text Input Layout’s Container Types

Supported states

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

.NET MAUI Text Input Layout’s Supported States
.NET MAUI Text Input Layout’s Supported States

Toggling password visibility

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

Password Visibility Toggling in .NET MAUI Text Input Layout
Password Visibility Toggling in .NET MAUI Text Input Layout

Floating labels and hints

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.

Floating Labels and Hints in .NET MAUI Text Input Layout
Floating Labels and Hints in .NET MAUI Text Input Layout

Helper text

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.

Helper Text in .NET MAUI Text Input Layout
Helper Text in .NET MAUI Text Input Layout

Error text

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.

.NET MAUI Text Input Layout Displaying Error Text
.NET MAUI Text Input Layout Displaying Error Text

Leading and trailing icons

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.

Leading and Trailing Icons in .NET MAUI Text Input Layout
Leading and Trailing Icons in .NET MAUI Text Input Layout

Note: For more details, refer to the .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.

Step 2: The Syncfusion .NET MAUI controls are available on NuGet Gallery. To add the .NET MAUI Text Input Layout control to your project, open the NuGet package manager in Visual Studio. Search for Syncfusion.Maui.Core and then install it.

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

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.

<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.

<inputLayout:SfTextInputLayout Hint= "First Name">
   <Entry Text = "Selva Ganapathy Kathiresan"/>
</inputLayout:SfTextInputLayout>
.NET MAUI Text Input Layout Displaying Floating Label
.NET MAUI Text Input Layout Displaying Floating Label

Conclusion

Thanks for reading! In this blog, we’ve seen the features of the new .NET MAUI Text Input Layout control rolled out in the 2022 Volume 4 release. Information about our other new controls and features is available in our Release Notes and What’s New pages. Try them out and leave your feedback in the comments section below!

Download 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, support portal, or feedback portal. We are always happy to help you!

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed
Scroll To Top