|
The SfTextInputLayout is Syncfusion UI component that helps to add the decorative elements such as floating labels, icons, and assistive labels at the top of input views.
You can highlight the border of TextInputLayout with the different colors using the ErrorColor and also the error message is displayed below the inputview to fill the input field. Creating the above UIYou can achieve the above UI using the following code sample.
[XAML] <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Margin="15">
<inputLayout:SfTextInputLayout Hint="Email"
x:Name="emailField"
ErrorColor="Red"
FocusedColor="Blue"
ContainerType="Outlined">
<inputLayout:SfTextInputLayout.Triggers>
<DataTrigger TargetType="inputLayout:SfTextInputLayout"
Binding="{Binding Source={x:Reference emailentry},Path=Text.Length}"
Value="0">
<Setter Property="HasError" Value="True"/>
<Setter Property="ErrorText" Value="Email is empty"/>
</DataTrigger>
</inputLayout:SfTextInputLayout.Triggers>
<Entry x:Name="emailentry" />
</inputLayout:SfTextInputLayout>
<inputLayout:SfTextInputLayout Hint="Password"
x:Name="passwordField"
ErrorColor="Red"
FocusedColor="Blue"
ContainerType="Outlined"
EnablePasswordVisibilityToggle="true">
<inputLayout:SfTextInputLayout.Triggers>
<DataTrigger TargetType="inputLayout:SfTextInputLayout"
Binding="{Binding Source={x:Reference pwdentry},Path=Text.Length}"
Value="0">
<Setter Property="HasError" Value="True"/>
<Setter Property="ErrorText" Value="Password is empty"/>
</DataTrigger>
</inputLayout:SfTextInputLayout.Triggers>
<Entry x:Name="pwdentry" />
</inputLayout:SfTextInputLayout>
<Button Text="Next" BackgroundColor="Black" TextColor="White"
WidthRequest="100" HorizontalOptions="Center"/>
</StackLayout>
See also
|
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
