Supported Input Views in .NET MAUI Text Input Layout

11 Aug 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 Text Input Layout.

<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
    }
};

Text Input Layout 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
    }
};

Text Input Layout 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
    }
};

Text Input Layout 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
    }
};

Text Input Layout 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
    }
};

Text Input Layout 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
    }
};

Text Input Layout 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
    }
};

Text Input Layout 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
    }
};

Text Input Layout 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
    }
};

Text Input Layout with a Picker control for selecting a fruit

NOTE

The Windows platform does not support the MAUI Picker as an input view of Text Input Layout. 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
    }
};

Text Input Layout with a TimePicker for time selection

NOTE

The Windows platform does not support the MAUI TimePicker as an input view of Text Input Layout. 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
    }
};

Text Input Layout with a DatePicker for date selection

NOTE

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

See Also