# .NET MAUI Entry Styling

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

Style the Entry 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](https://www.telerik.com/maui-ui/documentation/controls/entry/visual-states) to the Entry control.

> tip For a runnable example demonstrating the Entry Styling options, see the [SDKBrowser Demo Application](https://www.telerik.com/maui-ui/documentation/demos-and-sample-apps/sdkbrowser-app) and go to the **Entry > 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](https://www.telerik.com/maui-ui/documentation/controls/templatedbutton/visual-states) article for more details on the available visual states.

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

```XAML
<Style x:Key="CustomClearButtonStyle" TargetType="telerik:RadTemplatedButton">
    <Setter Property="TextColor" Value="#A30111" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                
                <VisualState Name="MouseOver">
                    <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>
```

> tip For a runnable example demonstrating the Entry Clear button styling options, see the [SDKBrowser Demo Application](https://www.telerik.com/maui-ui/documentation/demos-and-sample-apps/sdkbrowser-app) and go to the **Entry > Styling** category.

## Font Options

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

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

## Validation Error View Style

The Entry 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>
```

> tip For a runnable example demonstrating the Entry's Styling, see the [SDKBrowser Demo Application](https://www.telerik.com/maui-ui/documentation/demos-and-sample-apps/sdkbrowser-app) and go to the **Entry > Styling** category.

## See Also

* [Text Appearance](https://www.telerik.com/maui-ui/documentation/controls/entry/text-appearance)
* [Events](https://www.telerik.com/maui-ui/documentation/controls/entry/events)
* [Visual Structure](https://www.telerik.com/maui-ui/documentation/controls/entry/visual-structure)