We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

SfTextInputLayout different Hint and Outline colour/thickness


I have a couple questions about the SfTextInputlayout with ContainerType Outline.  
  1. Is there a way to have separate colours for the Hint and Outline?  
  2. Can the Hint size and Outline thickness be configured?


5 Replies

LR Lakshmi Radha Krishnan Syncfusion Team October 18, 2019 06:19 AM UTC

Hi Geoff,


Greetings from Syncfusion.


Query 1: Is there a way to have separate colours for the Hint and Outline?  


Yes, you can provide different color for the Hint and Outline in the SfTextInputLayout using the unique color key specified in the SyncfusionThemeDictionary. Please refer the below code snippet.


Reference Link: https://help.syncfusion.com/xamarin/themes/keys#sftextinputlayout


Code Snippet:








                <x:String x:Key="SfTextInputLayoutTheme">CustomTheme</x:String>

                <Color x:Key="SyncPrimaryLightColor">Green</Color>

                <Color x:Key="SyncPrimaryColor">Red</Color>

                <Color x:Key="SfTextInputLayoutHintColor">Blue</Color>

                <Color x:Key="SfTextInputLayoutLineColor">Aqua</Color>







Query 2: Can the Hint size and Outline thickness be configured?


You can change the hint size using the FontSize property in the HintLabelStyle property and the outline thickness can be changed using the FocusedStrokeWidth and UnfocusedStrokeWidth property. Please check the reference link.






Code Snippet:




<inputLayout:SfTextInputLayout Hint="Hint" ContainerType="Outlined" FocusedStrokeWidth="4" UnfocusedStrokeWidth="4">


                <inputLayout:LabelStyle FontSize="15"/>


            <Entry />




We have attached the sample, please download it from the following location.


Sample: https://www.syncfusion.com/downloads/support/forum/148404/ze/TextInputLayoutSample1790275936


Please let us know if you need further assistance on this.



Lakshmi R. 

MA Mark February 6, 2020 10:58 AM UTC

Along the same lines, is it possible to change the background of the hint? It looks pretty weird when i have a white background for the main control. I still want the main hint (ideally centered but that doesn't seem possible), but when the control is focused and the hint raises to the top, i'd like more control either over colour or preventing it from raising up.

DV Divya Venkatesan Syncfusion Team February 7, 2020 05:41 AM UTC

Hi Mark, 
Greetings from Syncfusion. 
Query 1: is it possible to change the background of the hint? 
Applying background color to hint label cannot be done as per our current design. Because the position of the floated hint has been divided into two-half, one half is placed inside the control and the remaining half is placed outside the control. Hence, it will not look good if we apply a background color to it. 
Query 2: preventing hint from raising up. 
You can hide the hint on focus instead of raising up by setting EnableFloating property of SfTextInputLayout as false
Code snippet [Xaml]: 
<inputLayout:SfTextInputLayout EnableFloating="False" Hint="Name"> 
    <Entry /> 
Please let us know if you need any further assistance. 
Divya Venkatesan 

LC Laurence Cortana December 14, 2020 11:46 AM UTC


I am also interested in a solution for outlined entries. I would really like to have the ability to set the hint's background color (while focused) to half blue - half white, considering Mark's example. Is there a way this could be achieved? Thanks in advance. 

RS Ramya Soundar Rajan Syncfusion Team December 15, 2020 11:48 AM UTC

Hi Laurence Cortana,

We have checked your reported query. We would like to inform you that from our current implementation, we can’t give the two colors for the hint background color for the SfTextInputLayout. 
Ramya S 

Live Chat Icon For mobile
Up arrow icon