Supported Input Views for .NET MAUI SfTextInputLayout

30 Jul 202624 minutes to read

Host any View inside .NET MAUI Text Input Layout by assigning it to the Content property. The most common input views are listed below.

Input View Source Notes
Entry MAUI Single-line text.
Editor MAUI Multi-line text. Set AutoSize="TextChanges" to grow with content.
Picker MAUI Drop-down list. Not supported on Windows.
TimePicker MAUI Time selection. Not supported on Windows.
DatePicker MAUI Date selection. Not supported on Windows.
SfAutocomplete Syncfusion Single or multiple selection. Requires Syncfusion.Maui.Inputs.
SfComboBox Syncfusion Single or multiple selection. Requires Syncfusion.Maui.Inputs.
SfMaskedEntry Syncfusion Masked text input. Requires Syncfusion.Maui.Inputs.
SfNumericEntry Syncfusion Numeric input with up/down. Requires Syncfusion.Maui.Inputs.

Prerequisites

Before using the SfTextInputLayout, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.Core

For a step-by-step setup, refer to the Getting Started documentation.

Entry

For single-line text input, host the .NET MAUI Entry control inside SfTextInputLayout.

<VerticalStackLayout>
    <inputLayout:SfTextInputLayout Hint="Name"
                                   HelperText="Enter the name"
                                   ContainerType="Outlined">
        <Entry />
    </inputLayout:SfTextInputLayout>
</VerticalStackLayout>
var inputLayout = new SfTextInputLayout
{
    Hint = "Name",
    HelperText = "Enter the name",
    ContainerType = ContainerType.Outlined,
    Content = new Entry()
};
Content = new VerticalStackLayout
{
    Children =
    {
        inputLayout
    }
};

SfTextInputLayout with an Entry control for single-line text input

Editor

For multi-line text input, host the .NET MAUI Editor and set AutoSize to TextChanges so the editor grows with the entered text.

<VerticalStackLayout>
    <inputLayout:SfTextInputLayout Hint="Notes"
                                   HelperText="Enter the brief description"
                                   ContainerType="Outlined">
        <Editor AutoSize="TextChanges" />
    </inputLayout:SfTextInputLayout>
</VerticalStackLayout>
var inputLayout = new SfTextInputLayout
{
    Hint = "Notes",
    HelperText = "Enter the brief description",
    ContainerType = ContainerType.Outlined,
    Content = new Editor { AutoSize = EditorAutoSizeOption.TextChanges }
};
Content = new VerticalStackLayout
{
    Children =
    {
        inputLayout
    }
};

SfTextInputLayout with an Editor control for multi-line text input

SfAutocomplete

Host the Syncfusion SfAutocomplete control for a text input with suggestion list. Install the Syncfusion.Maui.Inputs NuGet package and refer to the Autocomplete getting started page for platform setup.

Selection Modes

SelectionMode Description
Single Allows a single item to be selected.
Multiple Allows multiple items to be selected. Tokens are displayed according to MultiSelectionDisplayMode and TokensWrapMode.

Single Selection

<VerticalStackLayout>
    <inputLayout:SfTextInputLayout Hint="Country" ContainerType="Outlined">
        <autocomplete:SfAutocomplete>
            <autocomplete:SfAutocomplete.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Uganda</x:String>
                    <x:String>Ukraine</x:String>
                    <x:String>United Arab Emirates</x:String>
                    <x:String>United States</x:String>
                </x:Array>
            </autocomplete:SfAutocomplete.ItemsSource>
        </autocomplete:SfAutocomplete>
    </inputLayout:SfTextInputLayout>
</VerticalStackLayout>
var autocomplete = new SfAutocomplete
{
    ItemsSource = new[] { "Uganda", "Ukraine", "United Arab Emirates", "United States" }
};

var inputLayout = new SfTextInputLayout
{
    Hint = "Country",
    ContainerType = ContainerType.Outlined,
    Content = autocomplete
};
Content = new VerticalStackLayout
{
    Children =
    {
        inputLayout
    }
};

SfTextInputLayout with SfAutocomplete in single-selection mode

Multiple Selection

<VerticalStackLayout Spacing="10">
    <inputLayout:SfTextInputLayout Hint="Delimiter" 
                                   ContainerType="Outlined">
        <autocomplete:SfAutocomplete SelectionMode="Multiple"
                                     Placeholder="Enter"
                                     MultiSelectionDisplayMode="Delimiter">
            <autocomplete:SfAutocomplete.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Uganda</x:String>
                    <x:String>Ukraine</x:String>
                    <x:String>United Arab Emirates</x:String>
                    <x:String>United States</x:String>
                </x:Array>
            </autocomplete:SfAutocomplete.ItemsSource>
        </autocomplete:SfAutocomplete>
    </inputLayout:SfTextInputLayout>

    <inputLayout:SfTextInputLayout Hint="Token-None" 
                                   ContainerType="Outlined">
        <autocomplete:SfAutocomplete SelectionMode="Multiple" 
                                     Placeholder="Enter">
            <autocomplete:SfAutocomplete.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Uganda</x:String>
                    <x:String>Ukraine</x:String>
                    <x:String>United Arab Emirates</x:String>
                    <x:String>United States</x:String>
                </x:Array>
            </autocomplete:SfAutocomplete.ItemsSource>
        </autocomplete:SfAutocomplete>
    </inputLayout:SfTextInputLayout>

    <inputLayout:SfTextInputLayout Hint="Token-AutoSize" 
                                   ContainerType="Outlined">
        <autocomplete:SfAutocomplete SelectionMode="Multiple"
                                     Placeholder="Enter"
                                     TokensWrapMode="Wrap"
                                     EnableAutoSize="True">
            <autocomplete:SfAutocomplete.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Uganda</x:String>
                    <x:String>Ukraine</x:String>
                    <x:String>United Arab Emirates</x:String>
                    <x:String>United States</x:String>
                </x:Array>
            </autocomplete:SfAutocomplete.ItemsSource>
        </autocomplete:SfAutocomplete>
    </inputLayout:SfTextInputLayout>
</VerticalStackLayout>
var items = new[] { "Uganda", "Ukraine", "United Arab Emirates", "United States" };

var inputLayout = new SfTextInputLayout
{
    Hint = "Delimiter",
    ContainerType = ContainerType.Outlined,
    Content = new SfAutocomplete
    {
        SelectionMode = AutocompleteSelectionMode.Multiple,
        MultiSelectionDisplayMode = AutocompleteMultiSelectionDisplayMode.Delimiter,
        Placeholder = "Enter",
        ItemsSource = items
    }
};
Content = new VerticalStackLayout
{
    Children =
    {
        inputLayout
    }
};

SfTextInputLayout with SfAutocomplete in multiple-selection mode

For more information, see the Autocomplete Selection documentation.

SfComboBox

Host the Syncfusion SfComboBox control for a drop-down selection. Install the Syncfusion.Maui.Inputs NuGet package and refer to the ComboBox getting started page for platform setup.

Selection Modes

SelectionMode Description
Single Allows a single item to be selected.
Multiple Allows multiple items to be selected. Tokens are displayed according to MultiSelectionDisplayMode and TokensWrapMode.

Single Selection

<VerticalStackLayout Spacing="10">
    <inputLayout:SfTextInputLayout Hint="Country" 
                                   ContainerType="Outlined">
        <combobox:SfComboBox>
            <combobox:SfComboBox.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Uganda</x:String>
                    <x:String>Ukraine</x:String>
                    <x:String>United Arab Emirates</x:String>
                    <x:String>United States</x:String>
                </x:Array>
            </combobox:SfComboBox.ItemsSource>
        </combobox:SfComboBox>
    </inputLayout:SfTextInputLayout>
</VerticalStackLayout>
var combobox = new SfComboBox
{
    ItemsSource = new[] { "Uganda", "Ukraine", "United Arab Emirates", "United States" }
};

var inputLayout = new SfTextInputLayout
{
    Hint = "Country",
    ContainerType = ContainerType.Outlined,
    Content = combobox
};
Content = new VerticalStackLayout
{
    Children =
    {
        inputLayout
    }
};

SfTextInputLayout with SfComboBox in single-selection mode

Multiple Selection

<VerticalStackLayout Spacing="10">
    <inputLayout:SfTextInputLayout Hint="Delimiter" 
                                   ContainerType="Outlined">
        <combobox:SfComboBox SelectionMode="Multiple"
                             Placeholder="Enter"
                             MultiSelectionDisplayMode="Delimiter">
            <combobox:SfComboBox.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Uganda</x:String>
                    <x:String>Ukraine</x:String>
                    <x:String>United Arab Emirates</x:String>
                    <x:String>United States</x:String>
                </x:Array>
            </combobox:SfComboBox.ItemsSource>
        </combobox:SfComboBox>
    </inputLayout:SfTextInputLayout>

    <inputLayout:SfTextInputLayout Hint="Token-None" 
                                   ContainerType="Outlined">
        <combobox:SfComboBox SelectionMode="Multiple" 
                             Placeholder="Enter">
            <combobox:SfComboBox.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Uganda</x:String>
                    <x:String>Ukraine</x:String>
                    <x:String>United Arab Emirates</x:String>
                    <x:String>United States</x:String>
                </x:Array>
            </combobox:SfComboBox.ItemsSource>
        </combobox:SfComboBox>
    </inputLayout:SfTextInputLayout>

    <inputLayout:SfTextInputLayout Hint="Token-AutoSize" 
                                   ContainerType="Outlined">
        <combobox:SfComboBox SelectionMode="Multiple"
                             Placeholder="Enter"
                             TokensWrapMode="Wrap"
                             EnableAutoSize="True">
            <combobox:SfComboBox.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Uganda</x:String>
                    <x:String>Ukraine</x:String>
                    <x:String>United Arab Emirates</x:String>
                    <x:String>United States</x:String>
                </x:Array>
            </combobox:SfComboBox.ItemsSource>
        </combobox:SfComboBox>
    </inputLayout:SfTextInputLayout>
</VerticalStackLayout>
var items = new[] { "Uganda", "Ukraine", "United Arab Emirates", "United States" };

var inputLayout = new SfTextInputLayout
{
    Hint = "Delimiter",
    ContainerType = ContainerType.Outlined,
    Content = new SfComboBox
    {
        SelectionMode = ComboBoxSelectionMode.Multiple,
        MultiSelectionDisplayMode = ComboBoxMultiSelectionDisplayMode.Delimiter,
        Placeholder = "Enter",
        ItemsSource = items
    }
};
Content = new VerticalStackLayout
{
    Children =
    {
        inputLayout
    }
};

SfTextInputLayout with SfComboBox in multiple-selection mode

For more information, see the ComboBox Selection documentation.

SfMaskedEntry

Host the Syncfusion SfMaskedEntry control for masked text input. Install the Syncfusion.Maui.Inputs NuGet package and refer to the MaskedEntry getting started page for platform setup.

<VerticalStackLayout Spacing="10">
    <inputLayout:SfTextInputLayout Hint="Card number"
                                   HelperText="Required *"
                                   ContainerType="Outlined">
        <maskedEntry:SfMaskedEntry MaskType="Simple"
                                   Mask="0000 0000 0000 0000" />
    </inputLayout:SfTextInputLayout>
</VerticalStackLayout>
var inputLayout = new SfTextInputLayout
{
    Hint = "Card number",
    HelperText = "Required *",
    ContainerType = ContainerType.Outlined,
    Content = new SfMaskedEntry
    {
        MaskType = MaskedEntryMaskType.Simple,
        Mask = "0000 0000 0000 0000"
    }
};
Content = new VerticalStackLayout
{
    Children =
    {
        inputLayout
    }
};

SfTextInputLayout with SfMaskedEntry configured for a 16-digit card number

SfNumericEntry

Host the Syncfusion SfNumericEntry control for numeric input with optional up/down buttons. Install the Syncfusion.Maui.Inputs NuGet package and refer to the NumericEntry getting started page for platform setup.

<VerticalStackLayout Spacing="10">
    <inputLayout:SfTextInputLayout Hint="Amount"
                                   HelperText="Enter the amount"
                                   ContainerType="Outlined">
        <numericEntry:SfNumericEntry Value="100"
                                     ShowClearButton="True"
                                     UpDownPlacementMode="Inline" />
    </inputLayout:SfTextInputLayout>
</VerticalStackLayout>
var inputLayout = new SfTextInputLayout
{
    Hint = "Amount",
    HelperText = "Enter the amount",
    ContainerType = ContainerType.Outlined,
    Content = new SfNumericEntry
    {
        Value = 100,
        ShowClearButton = true,
        UpDownPlacementMode = NumericEntryUpDownPlacementMode.Inline
    }
};
Content = new VerticalStackLayout
{
    Children =
    {
        inputLayout
    }
};

SfTextInputLayout with SfNumericEntry showing the inline up/down buttons and clear button

Picker

Host the MAUI Picker control for a drop-down list.

<VerticalStackLayout Spacing="10">
    <inputLayout:SfTextInputLayout Hint="Fruit"
                                   HelperText="Select a fruit"
                                   ContainerType="Outlined">
        <Picker>
            <Picker.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Apple</x:String>
                    <x:String>Orange</x:String>
                    <x:String>Strawberry</x:String>
                </x:Array>
            </Picker.ItemsSource>
        </Picker>
    </inputLayout:SfTextInputLayout>
</VerticalStackLayout>
var picker = new Picker
{
    ItemsSource = new[] { "Apple", "Orange", "Strawberry" }
};

var inputLayout = new SfTextInputLayout
{
    Hint = "Fruit",
    HelperText = "Select a fruit",
    ContainerType = ContainerType.Outlined,
    Content = picker
};
Content = new VerticalStackLayout
{
    Children =
    {
        inputLayout
    }
};

SfTextInputLayout with a Picker control for selecting a fruit

NOTE

The Windows platform does not support the MAUI Picker as an input view of SfTextInputLayout. Use a Syncfusion input view (such as SfComboBox or SfAutocomplete) on Windows.

TimePicker

Host the MAUI TimePicker for time selection.

<inputLayout:SfTextInputLayout Hint="Time"
                               HelperText="Select a start time"
                               ContainerType="Outlined">
    <TimePicker />
</inputLayout:SfTextInputLayout>
var inputLayout = new SfTextInputLayout
{
    Hint = "Time",
    HelperText = "Select a start time",
    ContainerType = ContainerType.Outlined,
    Content = new TimePicker()
};
Content = new VerticalStackLayout
{
    Children =
    {
        inputLayout
    }
};

SfTextInputLayout with a TimePicker for time selection

NOTE

The Windows platform does not support the MAUI TimePicker as an input view of SfTextInputLayout. Use a Syncfusion input view on Windows.

DatePicker

Host the MAUI DatePicker for date selection.

<VerticalStackLayout Spacing="10">
    <inputLayout:SfTextInputLayout Hint="Date of Birth"
                                   HelperText="Select birth date"
                                   ContainerType="Outlined">
        <DatePicker />
    </inputLayout:SfTextInputLayout>
</VerticalStackLayout>
var inputLayout = new SfTextInputLayout
{
    Hint = "Date of Birth",
    HelperText = "Select birth date",
    ContainerType = ContainerType.Outlined,
    Content = new DatePicker()
};
Content = new VerticalStackLayout
{
    Children =
    {
        inputLayout
    }
};

SfTextInputLayout with a DatePicker for date selection

NOTE

The Windows platform does not support the MAUI DatePicker as an input view of SfTextInputLayout. Use a Syncfusion input view on Windows.

See Also