The .NET MAUI NumericUpDown control provides a user-friendly experience for capturing numeric input values. It features increment and decrement buttons for users to easily change the value and supports a wide range of numeric formats, including currency, percentage, decimal, and more. Its features enhance the user experience and facilitate input validation.
Get started with the .NET MAUI NumericUpDown by using just a few lines of XAML code, as illustrated below. Additionally, check out our .NET MAUI NumericUpDown example that demonstrates how to implement the NumericUpDown control.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="NumericUpdownGettingStarted.MainPage"
xmlns:inputs="clr-namespace:Syncfusion.Maui.Toolkit.NumericUpDown;assembly=Syncfusion.Maui.Toolkit">
<VerticalStackLayout VerticalOptions="Center">
<inputs:SfNumericUpDown x:Name="NumericUpDown"
WidthRequest="200"
Value="100"
CustomFormat="C2"
ShowClearButton="True"
Placeholder="Enter input here..."/>
</VerticalStackLayout>
</ContentPage>
Customize the display of numeric values by applying specific formats to control the number of decimal digits, as well as adding prefixes and suffixes to the input values.
The NumericUpDown control automatically formats its values according to the user’s regional or cultural settings, ensuring a localized experience.
The .NET MAUI NumericUpDown control accepts only numerical inputs. However, as explained in the following sections, many more restrictions can be imposed.
Easily set minimum and maximum values to restrict users from entering numbers outside the defined range.
Use the IsEditable property to prevent users from directly modifying the numeric value in the editor.
Implement data validation and input handling techniques to ensure that users cannot leave the editor empty or enter null values.
When the input is cleared, display helpful hints with placeholder text to guide users in the NumericUpDown control.
Customize the position of the up and down buttons by setting the UpDownPlacementMode property to Inline for horizontal orientation and InlineVertical for vertical orientation.
Customize the alignment of the up and down buttons to position them to the left, right, or on both sides of the entry field for enhanced usability.
Define the number of decimal places displayed in the NumericUpDown control.
Users can easily adjust the value in the NumericUpDown control by using the arrow keys and the Page Up and Page Down keys. Additionally, while hovering over the control, users can modify the value by rotating the mouse wheel.
Users have the option to present values in the NumericUpDown control in various percentage formats:
Shows the actual numerical value followed by the percent sign.
Displays the computed value along with a percent sign.
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion® is proud to hold the following industry awards.