Table of Contents

InputField

InputField is an abstraction on MAUI Level for material inputs such as Entry, Editor, Picker, DatePicker, TimePicker, SearchBar, and more. It is a wrapper around the input controls and makes them in line with the material design guidelines.

Existing Controls

Creating a Custom Control

There are two ways to use InputField for custom controls. You can inherit from InputField or you can use it as a wrapper around your control.

Using InputField as a Wrapper

InputField can be used in XAML like any other control. You can pass an existing control to the InputField and it will wrap it. The control will be placed inside the InputField and the InputField will be styled according to the material design guidelines. When that control is focused, the InputField will be focused as well. This is useful for custom controls that are not part of the UraniumUI MAUI library.

<material:InputField Title="Pick a Time" HasValue="True">
    <TimePicker BackgroundColor="Transparent"/>
</material:InputField>

MAUI Material Design Picker

Inherit from InputField

To create a custom control, you need to inherit from the InputField class and override the Content property. That property is responsible for creating the control content and returning it. The following example shows how to create a custom control for the Entry control.

public class TimePickerField : InputField
{
    public override View Content { get; set; } = new Editor
    {
        BackgroundColor = Colors.Transparent,
        Margin = 5,
    };

    public override bool HasValue => !string.IsNullOrEmpty(Editor.Text);

    // ...
    // Your custom code
}

HasValue property should be overriden. That property is responsible for determining if the control has a value or not. If the control has a value, the title will be moved up. If the control does not have a value, the title will be moved down when unfocused.

MAUI Material Input

Validation

InputField implements IValidatable interface and provides built-in validation support. You can add validations to your input field and display validation messages.

var inputField = new InputField();
inputField.Validations.Add(new RequiredValidation { Message = "This field is required" });
inputField.Validations.Add(new MinLengthValidation { MinLength = 3, Message = "Minimum length is 3" });

To display validation messages, call DisplayValidation() method. To reset validation state, call ResetValidation() method.

Styling

InputField has the following style classes that can be used to style the control:

<Style TargetType="Label" Class="InputField.Title">
    <Setter Property="FontAttributes" Value="Bold" />
    <!--...-->
</Style>

<Style TargetType="Border" Class="InputField.Border">
    <Setter Property="MaximumHeightRequest" Value="80" />
    <!--...-->
</Style>

<Style TargetType="Image" Class="InputField.Icon">
    <Setter Property="HeightRequest" Value="10" />
    <Setter Property="WidthRequest" Value="10" />
    <!--...-->
</Style>

<Style TargetType="HorizontalStackLayout" Class="InputField.Attachments">
    <Setter Property="Spacing" Value="8" />
    <!--...-->
</Style>

<Style TargetType="Path" Class="InputField.ValidationIcon">
    <Setter Property="Fill" Value="MediumVioletRed" />
    <Setter Property="Data" Value="M7 11V1H8V11H7ZM8 13V14.01H7V13H8Z" />
    <!--...-->
</Style>

<Style TargetType="Label" Class="InputField.ValidationLabel">
    <Setter Property="TextColor" Value="MediumVioletRed" />
    <!--...-->
</Style>

Properties

  • Title: The floating label text
  • AccentColor: The color used for focused state and validation
  • TitleColor: The color of the floating label
  • BorderColor: The color of the input border
  • BorderThickness: The thickness of the input border
  • InputBackgroundColor: The background color of the input
  • InputBackground: The background brush of the input
  • Icon: The icon to display at the start of the input
  • CornerRadius: The corner radius of the input border
  • TitleFontSize: The font size of the floating label
  • FontAttributes: The font attributes of the floating label
  • FontFamily: The font family of the floating label
  • FontSize: The font size of the input text
  • FontAutoScalingEnabled: Whether font auto scaling is enabled
  • ContentAutomationId: The automation ID for the content control
Edit this page