Category / Section
How to customize the color of border and labels in SfTextInputLayout
1 min read
In addition to the available public properties in SfTextInputLayout, you can deeply customize the SfTextInputLayout using the DynamicResource keys also.
The following code sample demonstrates how to style the border and labels used in SfTextInputLayout using the following DynamicResource keys:
- SfTextInputLayoutFloatedHintUnfocusedColor
- SfTextInputLayoutLineColor
- SfTextInputLayoutHelperTextColor
- SfTextInputLayoutCounterLabelColor
Similarly, you can customize the appearance of the SfTextInputLayout by overriding the corresponding keys. You can check the keys and the UI elements to which they are mapped in this documentation.
Code snippets [Xaml]:
<ContentPage.Resources> <syncTheme:SyncfusionThemeDictionary> <syncTheme:SyncfusionThemeDictionary.MergedDictionaries> <ResourceDictionary> <x:String x:Key="SfTextInputLayoutTheme">CustomTheme</x:String> <Color x:Key="SfTextInputLayoutFloatedHintUnfocusedColor">Blue</Color> <Color x:Key="SfTextInputLayoutLineColor">Red</Color> <Color x:Key="SfTextInputLayoutHelperTextColor">Green</Color> <Color x:Key="SfTextInputLayoutCounterLabelColor">Violet</Color> </ResourceDictionary> </syncTheme:SyncfusionThemeDictionary.MergedDictionaries> </syncTheme:SyncfusionThemeDictionary> </ContentPage.Resources> <StackLayout> <inputLayout:SfTextInputLayout ContainerType="Outlined" EnablePasswordVisibilityToggle="true" HelperText="Enter password" Hint="Password" ShowCharCount="True"> <Entry Text="John" /> </inputLayout:SfTextInputLayout> </StackLayout>
Output:
