Class SfTextInputLayout

Represents the SfTextInputLayout control that enhances input views with decorative elements such as floating labels, icons, and assistive labels.

Inheritance

System.Object

SfView

SfContentView

SfTextInputLayout

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<Microsoft.Maui.IView>

System.Collections.Generic.ICollection<Microsoft.Maui.IView>

System.Collections.Generic.IEnumerable<Microsoft.Maui.IView>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement

Inherited Members

SfContentView.Content

SfContentView.ContentProperty

SfView.Children

SfView.ClipToBounds

SfView.Padding

Namespace: Syncfusion.Maui.Toolkit.TextInputLayout

Assembly: Syncfusion.Maui.Toolkit.dll

Syntax

public class SfTextInputLayout : SfContentView, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider, ITouchListener, IParentThemeElement, IThemeElement

Examples

<inputLayout:SfTextInputLayout Hint="Hint" HelperText="Helper" ErrorText="Error">
    <Entry />
</inputLayout:SfTextInputLayout>

Constructors

SfTextInputLayout()

Initializes a new instance of the SfTextInputLayout class.

Declaration

public SfTextInputLayout()

Fields

CharMaxLengthProperty

Identifies the CharMaxLength bindable property.

Declaration

public static readonly BindableProperty CharMaxLengthProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The CharMaxLength property determines maximum character length of the SfTextInputLayout.

ContainerBackgroundProperty

Identifies the ContainerBackground bindable property.

Declaration

public static readonly BindableProperty ContainerBackgroundProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The ContainerBackground property determines background color of the container in the SfTextInputLayout.

ContainerTypeProperty

Identifies the ContainerType bindable property.

Declaration

public static readonly BindableProperty ContainerTypeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The ContainerType property determines the appearance of the background and border in the SfTextInputLayout.

CurrentActiveColorProperty

Identifies the CurrentActiveColor bindable property.

Declaration

public static readonly BindableProperty CurrentActiveColorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The CurrentActiveColor property determines current active color of the SfTextInputLayout.

EnableFloatingProperty

Identifies the EnableFloating bindable property.

Declaration

public static readonly BindableProperty EnableFloatingProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The EnableFloating property determines whether the Label should float when the input is focused or unfocused in the SfTextInputLayout.

EnableHintAnimationProperty

Identifies the EnableHintAnimation bindable property.

Declaration

public static readonly BindableProperty EnableHintAnimationProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The EnableHintAnimation property determines whether need to enable the animation for hint text when input view is focused or unfocused in SfTextInputLayout.

EnablePasswordVisibilityToggleProperty

Identifies the EnablePasswordVisibilityToggle bindable property.

Declaration

public static readonly BindableProperty EnablePasswordVisibilityToggleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The EnablePasswordVisibilityToggle property determines whether need to display the password visibility toggle in the SfTextInputLayout.

ErrorLabelStyleProperty

Identifies the ErrorLabelStyle bindable property.

Declaration

public static readonly BindableProperty ErrorLabelStyleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The ErrorLabelStyle property determines the Label style of the error text in the SfTextInputLayout.

ErrorTextProperty

Identifies the ErrorText bindable property.

Declaration

public static readonly BindableProperty ErrorTextProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The ErrorText property determines error text of the SfTextInputLayout.

FocusedStrokeThicknessProperty

Identifies the FocusedStrokeThickness bindable property.

Declaration

public static readonly BindableProperty FocusedStrokeThicknessProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The FocusedStrokeThickness property determines the stroke thickness of the border when the SfTextInputLayout is focused.

HasErrorProperty

Identifies the HasError bindable property.

Declaration

public static readonly BindableProperty HasErrorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The HasError property determines whether the error text should be displayed or not in the SfTextInputLayout.

HelperLabelStyleProperty

Identifies the HintLabelStyle bindable property.

Declaration

public static readonly BindableProperty HelperLabelStyleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The HelperLabelStyle property determines the Label style of the helper text in the SfTextInputLayout.

HelperTextProperty

Identifies the HelperText bindable property.

Declaration

public static readonly BindableProperty HelperTextProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The HelperText property determines helper text of the SfTextInputLayout.

HintLabelStyleProperty

Identifies the HintLabelStyle bindable property.

Declaration

public static readonly BindableProperty HintLabelStyleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The HintLabelStyle property determines the Label style of the hint text in the SfTextInputLayout.

HintProperty

Identifies the Hint bindable property.

Declaration

public static readonly BindableProperty HintProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The Hint property determines hint text in the SfTextInputLayout.

InputViewPaddingProperty

Identifies the InputViewPadding bindable property.

Declaration

public static readonly BindableProperty InputViewPaddingProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The InputViewPadding property determines padding for the input view in the SfTextInputLayout.

IsEnabledProperty

Identifies the IsEnabled bindable property.

Declaration

public static readonly BindableProperty IsEnabledProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The IsEnabled property determines whether the control is enabled or not in the SfTextInputLayout.

IsHintAlwaysFloatedProperty

Identifies the IsHintAlwaysFloated bindable property.

Declaration

public static readonly BindableProperty IsHintAlwaysFloatedProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The IsHintAlwaysFloated property determines whether the hint text should always float or not in the SfTextInputLayout.

LeadingViewPositionProperty

Identifies the LeadingViewPosition bindable property.

Declaration

public static readonly BindableProperty LeadingViewPositionProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The LeadingViewPosition property determines leading view position in the SfTextInputLayout.

LeadingViewProperty

Identifies the LeadingView bindable property.

Declaration

public static readonly BindableProperty LeadingViewProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The LeadingView property specifies the display of icons or other visual elements in the leading view of SfTextInputLayout.

OutlineCornerRadiusProperty

Identifies the OutlineCornerRadius bindable property.

Declaration

public static readonly BindableProperty OutlineCornerRadiusProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The OutlineCornerRadius property specifies the corner radius of the outline border in the SfTextInputLayout.

ReserveSpaceForAssistiveLabelsProperty

Identifies the ReserveSpaceForAssistiveLabels bindable property.

Declaration

public static readonly BindableProperty ReserveSpaceForAssistiveLabelsProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The ReserveSpaceForAssistiveLabels property determines the reserved space for assistive labels such as helper text, error text, and character counters in the SfTextInputLayout.

ShowHelperTextProperty

Identifies the ShowHelperText bindable property.

Declaration

public static readonly BindableProperty ShowHelperTextProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The ShowHelperText property determines whether the helper text should be displayed or not in the SfTextInputLayout.

ShowHintProperty

Identifies the ShowHint bindable property.

Declaration

public static readonly BindableProperty ShowHintProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The ShowHint property determines whether the hint text should be displayed or not in the SfTextInputLayout.

ShowLeadingViewProperty

Identifies the ShowLeadingView bindable property.

Declaration

public static readonly BindableProperty ShowLeadingViewProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The ShowLeadingView property determines whether the leading view should be displayed in the SfTextInputLayout.

ShowTrailingViewProperty

Identifies the ShowTrailingView bindable property.

Declaration

public static readonly BindableProperty ShowTrailingViewProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The ShowTrailingView property determines whether the trailing view should be displayed in the SfTextInputLayout.

StrokeProperty

Identifies the Stroke bindable property.

Declaration

public static readonly BindableProperty StrokeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The Stroke property determines border color of the SfTextInputLayout.

TrailingViewPositionProperty

Identifies the TrailingViewPosition bindable property.

Declaration

public static readonly BindableProperty TrailingViewPositionProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The TrailingViewPosition property determines trailing view position in the SfTextInputLayout.

TrailingViewProperty

Identifies the TrailingView bindable property.

Declaration

public static readonly BindableProperty TrailingViewProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The TrailingView property specifies the display of icons or other visual elements in the trailing view of SfTextInputLayout.

UnfocusedStrokeThicknessProperty

Identifies the UnfocusedStrokeThickness bindable property.

Declaration

public static readonly BindableProperty UnfocusedStrokeThicknessProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The UnfocusedStrokeThickness property determines stroke thickness of the border when the SfTextInputLayout is unfocused.

Properties

CharMaxLength

Gets or sets the maximum character length for the input. An error color is applied when this limit is exceeded.

Declaration

public int CharMaxLength { get; set; }

Property Value

Type
System.Int32

Examples

The following code demonstrates how to use the UnfocusedStrokeThickness property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               CharMaxLength="10">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.CharMaxLength = 10;
inputLayout.Content = new Entry();

ContainerBackground

Gets or sets the background of the container.

Declaration

public Brush ContainerBackground { get; set; }

Property Value

Type
Microsoft.Maui.Controls.Brush

Examples

The following code demonstrates how to use the ContainerBackground property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               ContainerType="Filled"
                               ContainerBackground="#E6EEF9">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.ContainerType = ContainerType.Filled;
inputLayout.ContainerBackground = Color.FromHex("#E6EEF9");
inputLayout.Content = new Entry();

ContainerType

Gets or sets the type of container, which specifies the appearance of the background and its border. The default value is ContainerType.Filled.

Declaration

public ContainerType ContainerType { get; set; }

Property Value

Type
ContainerType

Examples

The following code demonstrates how to use the ContainerType property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               Hint="Name"
                               ContainerType="Outlined">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Name";
inputLayout.ContainerType = ContainerType.Outlined;
inputLayout.Content = new Entry();

CurrentActiveColor

Gets a value for current active color based on input view's focus state.

Declaration

public Color CurrentActiveColor { get; }

Property Value

Type
Microsoft.Maui.Graphics.Color

EnableFloating

Gets or sets a value indicating whether the assistive label should float when the input is focused or unfocused.

Declaration

public bool EnableFloating { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the label should float; otherwise, `false`.

Examples

The following code demonstrates how to use the EnableFloating property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               Hint="Name"
                               EnableFloating="False">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Name";
inputLayout.EnableFloating = false;
inputLayout.Content = new Entry();

EnableHintAnimation

Gets or sets a value indicating whether to enable animation for the hint text when the input view is focused or unfocused.

Declaration

public bool EnableHintAnimation { get; set; }

Property Value

Type	Description
System.Boolean	`true` if hint animation is enabled; otherwise, `false`.

Examples

The following code demonstrates how to use the EnableHintAnimation property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               Hint="Name"
                               EnableHintAnimation="False">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Name";
inputLayout.EnableHintAnimation = false;
inputLayout.Content = new Entry();

EnablePasswordVisibilityToggle

Gets or sets a value indicating whether to show the password visibility toggle.

Declaration

public bool EnablePasswordVisibilityToggle { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the password visibility toggle is enabled; otherwise, `false`.

Remarks

This property is supported only for Microsoft.Maui.Controls.Entry control.

Examples

The following code demonstrates how to use the EnablePasswordVisibilityToggle property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               Hint="Password"
                               EnablePasswordVisibilityToggle="True">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Password";
inputLayout.EnablePasswordVisibilityToggle = true;
inputLayout.Content = new Entry();

ErrorLabelStyle

Gets or sets the style applied to the error label.

Declaration

public LabelStyle ErrorLabelStyle { get; set; }

Property Value

Type
LabelStyle

Remarks

This style is used to customize the appearance of the error message displayed below the input field.

Examples

The following code demonstrates how to use the ErrorLabelStyle property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               Hint="Email"
                               ErrorText="Invalid email">
 <inputLayout:SfTextInputLayout.ErrorLabelStyle>
   <inputLayout:LabelStyle TextColor = "Red" />
</inputLayout:SfTextInputLayout.ErrorLabelStyle>
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Email";
inputLayout.ErrorText = "Invalid email";
inputLayout.ErrorLabelStyle = new LabelStyle() { TextColor = Color.Red };
inputLayout.Content = new Entry();

ErrorText

Gets or sets the error text displayed when validation fails.

Declaration

public string ErrorText { get; set; }

Property Value

Type
System.String

Remarks

Error messages are displayed below the input line, replacing the helper text until the error is fixed.

Examples

The following code demonstrates how to use the ErrorText property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               Hint="Email"
                               ErrorText="Invalid email"
                               HasError="True">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Email";
inputLayout.ErrorText = "Invalid email"
inputLayout.HasError = true;
inputLayout.Content = new Entry();

FocusedStrokeThickness

Gets or sets the stroke thickness of the bottom line or outline border when control is in a focused state. This property is applicable for both filled and outlined container types.

Declaration

public double FocusedStrokeThickness { get; set; }

Property Value

Type	Description
System.Double	The default value is 2.

Examples

The following code demonstrates how to use the FocusedStrokeThickness property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               ContainerType="Outlined"
                               FocusedStrokeThickness="10">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.ContainerType = ContainerType.Outlined;
inputLayout.FocusedStrokeThickness = 10;
inputLayout.Content = new Entry();

HasError

Gets or sets a value indicating whether the input has validation errors.

Declaration

public bool HasError { get; set; }

Property Value

Type	Description
System.Boolean	`true` if there are validation errors; otherwise, `false`.

Examples

The following code demonstrates how to use the HasError property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               ErrorText="Invalid"
                               HasError="True">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.HasError = true;
inputLayout.ErrorText="Invalid";
inputLayout.Content = new Entry();

HelperLabelStyle

Gets or sets the style applied to the helper label.

Declaration

public LabelStyle HelperLabelStyle { get; set; }

Property Value

Type
LabelStyle

Examples

The following code demonstrates how to use the HelperLabelStyle property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               Hint="Name"
                               HelperText="Enter your name">
 <inputLayout:SfTextInputLayout.HelperLabelStyle>
   <inputLayout:LabelStyle TextColor = "Green" />
</inputLayout:SfTextInputLayout.HelperLabelStyle>
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Name";
inputLayout.HelperText = "Enter your name";
inputLayout.HelperLabelStyle = new LabelStyle() { TextColor = Color.Green };
inputLayout.Content = new Entry();

HelperText

Gets or sets the helper text that provides additional information about the input.

Declaration

public string HelperText { get; set; }

Property Value

Type
System.String

Examples

The following code demonstrates how to use the HelperText property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               Hint="Name"
                               HelperText="Enter name">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Name";
inputLayout.HelperText = "Enter name";
inputLayout.Content = new Entry();

Hint

Gets or sets the hint text displayed in the input view.

Declaration

public string Hint { get; set; }

Property Value

Type
System.String

Examples

The following code demonstrates how to use the Hint property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               Hint="Name">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Name";
inputLayout.Content = new Entry();

HintLabelStyle

Gets or sets the style applied to the hint label.

Declaration

public LabelStyle HintLabelStyle { get; set; }

Property Value

Type
LabelStyle

Examples

The following code demonstrates how to use the HintLabelStyle property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               Hint="Name">
 <inputLayout:SfTextInputLayout.HintLabelStyle>
   <inputLayout:LabelStyle TextColor = "Green" />
</inputLayout:SfTextInputLayout.HintLabelStyle>
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Name";
inputLayout.HintLabelStyle = new LabelStyle() { TextColor = Color.Green };
inputLayout.Content = new Entry();

InputViewPadding

Gets or sets custom padding for the input view, overriding the default padding.

Declaration

public Thickness InputViewPadding { get; set; }

Property Value

Type
Microsoft.Maui.Thickness

Examples

The following code demonstrates how to use the InputViewPadding property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               InputViewPadding="0,5,0,5">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.InputViewPadding= new Thickness(0,5,0,5);;
inputLayout.Content = new Entry();

IsEnabled

Gets or sets a value indicating whether the control is enabled and can interact with the user. The default value is true.

Declaration

public bool IsEnabled { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the control is enabled; otherwise, `false`.

Examples

The following code demonstrates how to use the IsEnabled property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               Hint="Name"
                               IsEnabled="False">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Name";
inputLayout.IsEnabled = false;
inputLayout.Content = new Entry();

IsHintAlwaysFloated

Gets or sets a value indicating whether the hint label should always be floated, even when the input text is empty. The default value is false.

Declaration

public bool IsHintAlwaysFloated { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the hint label should always be floated; otherwise, `false`.

Examples

The following code demonstrates how to use the IsHintAlwaysFloated property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               IsHintAlwaysFloated="True"
                               Hint="Name">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Name";
inputLayout.IsHintAlwaysFloated = true;
inputLayout.Content = new Entry();

LeadingView

Gets or sets the view to be displayed before the input view.

Declaration

public View LeadingView { get; set; }

Property Value

Type
Microsoft.Maui.Controls.View

Remarks

This view is typically used to display icons or other visual elements.

Examples

The following code demonstrates how to use the LeadingView property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput" 
                              Hint="Name">
   <Entry/>
   <inputLayout:SfTextInputLayout.LeadingView>
        <Label
             Text="&#x1F5D3;">
        </Label>
   </inputLayout:SfTextInputLayout.LeadingView>
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Birth date";
inputLayout.LeadingView = new Label() { Text = "\U0001F5D3" };
inputLayout.Content = new Entry();

LeadingViewPosition

Gets or sets the position of the leading view relative to the input layout. The default value is ViewPosition.Inside.

Declaration

public ViewPosition LeadingViewPosition { get; set; }

Property Value

Type
ViewPosition

<inputLayout:SfTextInputLayout x:Name="textInput" 
                               Hint="Name"
                               LeadingViewPosition="Outside">
   <Entry/>
   <inputLayout:SfTextInputLayout.LeadingView>
        <Label
             Text="&#x1F5D3;">
        </Label>
   </inputLayout:SfTextInputLayout.LeadingView>
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Birth date";
inputLayout.LeadingView = new Label() { Text = "\U0001F5D3" };
inputLayout.LeadingViewPosition = ViewPosition.Outside;
inputLayout.Content = new Entry();

OutlineCornerRadius

Gets or sets the corner radius of the outline border.

Declaration

public double OutlineCornerRadius { get; set; }

Property Value

Type	Description
System.Double	The default value is 4.

Remarks

It is applicable only for the outlined container type.

Examples

The following code demonstrates how to use the OutlineCornerRadius property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               ContainerType="Outlined"
                               OutlineCornerRadius="8">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.ContainerType = ContainerType.Outlined;
inputLayout.OutlineCornerRadius = 8;
inputLayout.Content = new Entry();

ReserveSpaceForAssistiveLabels

Gets or sets a value indicating whether space is reserved for assistive labels such as helper text, error text, and character counters.

Declaration

public bool ReserveSpaceForAssistiveLabels { get; set; }

Property Value

Type	Description
System.Boolean	`true` if space should be reserved for assistive labels; otherwise, `false`.

Remarks

If set to false, space will only be allocated based on the presence of helper text, error text, and character counter labels.

Examples

The following code demonstrates how to use the ReserveSpaceForAssistiveLabels property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               Hint="Name"
                               ReserveSpaceForAssistiveLabels="False">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Name";
inputLayout.ReserveSpaceForAssistiveLabels = false;
inputLayout.Content = new Entry();

ShowHelperText

Gets or sets a value indicating whether the helper text should be displayed.

Declaration

public bool ShowHelperText { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the helper text should be displayed; otherwise, `false`.

Examples

The following code demonstrates how to use the ShowHelperText property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               HelperText="Name">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.HelperText = "Name";
inputLayout.Content = new Entry();

ShowHint

Gets or sets a value indicating whether the hint text should be displayed.

Declaration

public bool ShowHint { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the hint text should be displayed; otherwise, `false`.

Examples

The following code demonstrates how to use the ShowHint property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               ShowHint="True" 
                               Hint="Name">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.ShowHint = true;
inputLayout.Hint = "Name";
inputLayout.Content = new Entry();

ShowLeadingView

Gets or sets a value indicating whether the leading view should be displayed. The default value is true.

Declaration

public bool ShowLeadingView { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the leading view should be displayed; otherwise, `false`.

Examples

The following code demonstrates how to use the ShowLeadingView property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput" 
                               Hint="Name"
                               ShowLeadingView="False">
   <Entry/>
   <inputLayout:SfTextInputLayout.LeadingView>
        <Label
             Text="&#x1F5D3;">
        </Label>
   </inputLayout:SfTextInputLayout.LeadingView>
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Birth date";
inputLayout.LeadingView = new Label() { Text = "\U0001F5D3" };
inputLayout.ShowLeadingView = false;
inputLayout.Content = new Entry();

ShowTrailingView

Gets or sets a value indicating whether the trailing view should be displayed. The default value is true.

Declaration

public bool ShowTrailingView { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the trailing view should be displayed; otherwise, `false`.

Examples

The following code demonstrates how to use the ShowTrailingView property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput" 
                               Hint="Name"
                               ShowTrailingView="False">
   <Entry/>
   <inputLayout:SfTextInputLayout.TrailingView>
        <Label
             Text="&#x1F5D3;">
        </Label>
   </inputLayout:SfTextInputLayout.TrailingView>
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Birth date";
inputLayout.TrailingView = new Label() { Text = "\U0001F5D3" };
inputLayout.ShowTrailingView = false;
inputLayout.Content = new Entry();

Stroke

Gets or sets the color of the border or base line, depending on the container type.

Declaration

public Color Stroke { get; set; }

Property Value

Type
Microsoft.Maui.Graphics.Color

Examples

The following code demonstrates how to use the Stroke property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               Stroke="Blue">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Stroke = Colors.Blue;
inputLayout.Content = new Entry();

Text

Gets the value of the input text of the SfTextInputLayout.

Declaration

public string Text { get; }

Property Value

Type
System.String

TrailingView

Gets or sets the view to be displayed after the input view.

Declaration

public View TrailingView { get; set; }

Property Value

Type
Microsoft.Maui.Controls.View

Remarks

This view is typically used to display icons or other visual elements.

Examples

The following code demonstrates how to use the TrailingView property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput" 
                              Hint="Name">
   <Entry/>
   <inputLayout:SfTextInputLayout.TrailingView>
        <Label
             Text="&#x1F5D3;">
        </Label>
   </inputLayout:SfTextInputLayout.TrailingView>
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Birth date";
inputLayout.TrailingView = new Label() { Text = "\U0001F5D3" };
inputLayout.Content = new Entry();

TrailingViewPosition

Gets or sets the position of the trailing view relative to the input layout. The default value is ViewPosition.Inside.

Declaration

public ViewPosition TrailingViewPosition { get; set; }

Property Value

Type
ViewPosition

Examples

The following code demonstrates how to use the TrailingViewPosition property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput" 
                               Hint="Name"
                               TrailingViewPosition="Outside">
   <Entry/>
   <inputLayout:SfTextInputLayout.TrailingView>
        <Label
             Text="&#x1F5D3;">
        </Label>
   </inputLayout:SfTextInputLayout.TrailingView>
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.Hint = "Birth date";
inputLayout.TrailingView = new Label() { Text = "\U0001F5D3" };
inputLayout.TrailingViewPosition = ViewPosition.Outside;
inputLayout.Content = new Entry();

UnfocusedStrokeThickness

Gets or sets the stroke thickness for the bottom line or outline border when control is in an unfocused state This property is applicable for filled and outlined container types.

Declaration

public double UnfocusedStrokeThickness { get; set; }

Property Value

Type	Description
System.Double	The default value is 1.

Examples

The following code demonstrates how to use the UnfocusedStrokeThickness property in the SfTextInputLayout.

XAML
C#

<inputLayout:SfTextInputLayout x:Name="textInput"
                               ContainerType="Outlined"
                               UnfocusedStrokeThickness="10">
    <Entry />
</inputLayout:SfTextInputLayout>

var inputLayout = new SfTextInputLayout();
inputLayout.ContainerType = ContainerType.Outlined;
inputLayout.UnfocusedStrokeThickness = 10;
inputLayout.Content = new Entry();

Events

PasswordVisibilityToggled

Occurs when the visibility of the password input is toggled.

Declaration

public event EventHandler<PasswordVisibilityToggledEventArgs> PasswordVisibilityToggled

Event Type

Type
System.EventHandler<PasswordVisibilityToggledEventArgs>

Examples

Here is an example of how to register the PasswordVisibilityToggled event.

var inputLayout = new SfTextInputLayout();
inputLayout.EnablePasswordVisibilityToggle = true;
inputLayout.PasswordVisibilityToggled += OnPasswordVisibilityToggled;

private void OnPasswordVisibilityToggled(object sender, PasswordVisibilityToggledEventArgs e)
{
   var passwordVisibility = e.IsPasswordVisible;
}

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<>

System.Collections.Generic.ICollection<>

System.Collections.Generic.IEnumerable<>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement