.NET MAUI Editor Styling

Updated on Feb 5, 2026

The Editor provides styling options for setting the appearance of its border and font.

Style the Editor using the following properties:

• CornerRadius (Microsoft.Maui.CornerRadius)—Defines the corners radius of the border around the input control.
• BackgroundColor (Microsoft.Maui.Graphics.Color)—Defines the background color of the input control.
• TextColor (Microsoft.Maui.Graphics.Color)—Defines the text color of the input control.
• PlaceholderColor (Microsoft.Maui.Graphics.Color)—Defines the color of the placeholder text of the input control.
• BorderBrush (Microsoft.Maui.Controls.Brush)—Defines the border brush of the input control.
• BorderThickness (Microsoft.Maui.Thickness)—Defines the border thickness of the input control.

In addition to the available styling properties, you can apply specific Visual States to the Editor control.

For a runnable example demonstrating the Editor Styling options, see the SDKBrowser Demo Application and go to the Editor > Styling category.

Clear Button Style

Style the Clear button which is displayed by default when entering text in the control using the following properties:

• ClearButtonVisibility (enum of type Microsoft.Maui.ClearButtonVisibility)—Defines a value indicating whether the clear button (the button that clears the text when pressed) will be visible. The options are: Never and WhileEditing (default).
• ClearButtonStyle (Style with target type RadTemplatedButton)—Specifies the style of the clear button. Review the TemplatedButton Visual States article for more details on the available visual states.

The following example demonstrates how to style the clear button of the Editor:

xaml

<Style x:Key="CustomClearButtonStyle" TargetType="telerik:RadTemplatedButton">
    <Setter Property="TextColor" Value="#A30111" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <!-- Applicable for Desktop only -->
                <VisualState Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadTemplatedButton.TextColor" Value="#B53340" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Pressed">
                    <VisualState.Setters>
                        <Setter Property="telerik:RadTemplatedButton.TextColor" Value="#C76670" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Disabled" />
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

For a runnable example demonstrating the Editor Styling options, see the SDKBrowser Demo Application and go to the Editor > Styling category.

Font Options

The Editor control has the following properties for defining the font options:

• FontAttributes (enum of type Microsoft.Maui.Controls.FontAttributes)—Defines the font attributes. The available options are:
  • (Default) None—No font attributes are applied.
  • Bold—The text is displayed in bold.
  • Italic—The text is displayed in italic.
• FontFamily (string)—Defines the font family.
• FontSize (double)—Defines the font size.
• FontAutoScalingEnabled (bool)—Specifies whether font auto-scaling is enabled.

The following example demonstrates how to apply the font options to the Editor.

XAML

<VerticalStackLayout>
    <telerik:RadEditor Text="Normal Text" x:Name="entry"/>
    <telerik:RadEditor Text="Bold Text - Large" FontAttributes="Bold" FontSize="Large" />
    <telerik:RadEditor Text="Italic Text - Medium" FontAttributes="Italic" FontSize="Medium"/>
    <telerik:RadEditor Text="Italic and Bold Text - Small"  FontSize="Small" x:Name="smallEntry"/>
    <telerik:RadEditor Text="Micro Text"  FontSize="Micro" />
</VerticalStackLayout>

Validation Error View Style

The Editor control provides the following properties for styling the validation error view:

Use the following properties to style the error view when validation applies:

• ValidationErrorColor (Color)—Defines the custom color for the error views.
• ValidationErrorImageStyle (Style with target type Image)—Defines the style that applies to the error icon.
• ValidationErrorLabelStyle (Style with target type Label)—Defines the style that applies to the error label.

Here is an example of how to style the validation error label:

xaml

<Style x:Key="CustomValidationLabelStyle" TargetType="Label">
    <Setter Property="FontAttributes" Value="Italic" />
    <Setter Property="TextColor" Value="#A30111" />
</Style>

And here is an example of how to style the validation error image:

xaml

<Style x:Key="CustomValidationErrorImageStyle" TargetType="Image">
    <Setter Property="Source">
        <FontImageSource Glyph="&#xe82f;"
                         Color="#A30111"
                         Size="{OnPlatform Default=16, iOS=20, MacCatalyst=20}"
                         FontFamily="TelerikFontExamples" />
    </Setter>
</Style>

For a runnable example demonstrating the Editor's Styling, see the SDKBrowser Demo Application and go to the Editor > Styling category.

See Also

• Text Appearance
• Text Selection
• Events
• Validation
• Visual States