Font Customization in .NET MAUI Text Input Layout (SfTextInputLayout)

8 Jan 20254 minutes to read

You can customize the appearance (size, attributes, and family) of the font by setting the FontFamily, FontSize, and FontAttributes properties of the LabelStyle property.

Refer to this documentation to configure the custom fonts in the .NET MAUI.

Hint

You can customize the font of the Hint label by setting the FontFamily, FontSize, and FontAttributes, properties of HintLabelStyle in the SfTextInputLayout.

XAML

<inputLayout:SfTextInputLayout Hint="Name"
                               ContainerType="Outlined"
                               HelperText="Enter your name">
    <Entry />
    <inputLayout:SfTextInputLayout.HintLabelStyle>
        <inputLayout:LabelStyle FontSize="16" FontFamily="Lobster-Regular"/>
    </inputLayout:SfTextInputLayout.HintLabelStyle>
</inputLayout:SfTextInputLayout>

C#

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Name";
inputLayout.ContainerType = ContainerType.Outlined;
inputLayout.HelperText = "Enter your name";
inputLayout.HintLabelStyle = new LabelStyle() { FontFamily = "Lobster-Regular", FontSize = 16};
inputLayout.Content = new Entry();

Helper text

You can customize the font of the HelperText label by setting the FontFamily, FontSize, and FontAttributes properties of HelperLabelStyle in the SfTextInputLayout.

XAML

<inputLayout:SfTextInputLayout Hint="Name"
                               ContainerType="Outlined"
                               CharMaxLength="3"
                               HelperText="Enter your name">
    <Entry />
    <inputLayout:SfTextInputLayout.HelperLabelStyle>
        <inputLayout:LabelStyle FontSize="12" FontFamily="Lobster-Regular"/>
    </inputLayout:SfTextInputLayout.HelperLabelStyle>
</inputLayout:SfTextInputLayout>

C#

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Name";
inputLayout.ContainerType = ContainerType.Outlined;
inputLayout.HelperText = "Enter your name";
inputLayout.HelperLabelStyle = new LabelStyle() { FontFamily = "Lobster-Regular", FontSize = 12};
inputLayout.Content = new Entry();

Error text

You can customize the font of ErrorText label by setting the FontFamily, FontSize, and FontAttributes properties of ErrorLabelStyle in SfTextInputLayout.

XAML

<inputLayout:SfTextInputLayout
                   Hint="Name"
                   ContainerType="Outlined"
                   HasError="True"
                   ErrorText="Enter valid name">
    <Entry />
    <inputLayout:SfTextInputLayout.ErrorLabelStyle>
        <inputLayout:LabelStyle FontSize="12" FontFamily="Lobster-Regular"/>
    </inputLayout:SfTextInputLayout.ErrorLabelStyle>
</inputLayout:SfTextInputLayout>

C#

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Name";
inputLayout.ContainerType = ContainerType.Outlined;
inputLayout.HasError = true;
inputLayout.ErrorText = "Enter valid name";
inputLayout.ErrorLabelStyle = new LabelStyle() { FontFamily = "Lobster-Regular", FontSize = 12};
inputLayout.Content = new Entry();