Class SfComboBox<TValue, TItem>

The ComboBox component enables users to type a value or select an option from a predefined list of options.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
SfBaseComponent
SfDataBoundComponent
SfDropDownBase<TItem>
SfDropDownList<TValue, TItem>
SfComboBox<TValue, TItem>
SfAutoComplete<TValue, TItem>
Implements
Inherited Members
Namespace: Syncfusion.Blazor.DropDowns
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfComboBox<TValue, TItem> : SfDropDownList<TValue, TItem>, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Type Parameters
Name Description
TValue

The type of the value selected or entered in the ComboBox.
TItem

The type of items displayed in the ComboBox dropdown list.
Remarks

The ComboBox extends DropDownList and provides additional features such as custom value input, autofill, and filtering capabilities. Use TValue for the value type and TItem for the data type of items in the dropdown list.

Examples
<SfComboBox TValue="string" TItem="string" DataSource="@MyList" AllowCustom="true" Autofill="true">
    <ComboBoxEvents TValue="string" TItem="string" ValueChange="@OnValueChange" />
</SfComboBox>
@code {
    protected List<string> MyList = new List<string> { "Apple", "Banana", "Orange" };
    private void OnValueChange(ChangeEventArgs<string, string> args)
    {
        // Handle value change
    }
}

Constructors

SfComboBox()

Declaration
public SfComboBox()

Properties

AllowCustom

Gets or sets a value indicating whether the ComboBox allows users to enter custom values not present in the data source.

Declaration
[Parameter]
public bool AllowCustom { get; set; }
Property Value
Type Description
bool

A boolean where true allows users to enter custom values; otherwise, false. The default value is true.
Remarks

When set to true, users can type a value that does not exist in the data source, and the CustomValueSpecifier event is triggered to handle the custom value. If set to false, only predefined values from the data source can be selected.

Examples
<SfComboBox TValue="string" TItem="string" AllowCustom="true" DataSource="@MyList">
    <ComboBoxEvents TValue="string" TItem="string" CustomValueSpecifier="@OnCustomValue" />
</SfComboBox>
@code {
    protected List<string> MyList = new List<string> { "Apple", "Banana", "Orange" };
    private void OnCustomValue(CustomValueSpecifierEventArgs<string> args)
    {
        args.Item = args.Text;
    }
}

Autofill

Gets or sets a value indicating whether the ComboBox automatically fills the input with the first matched item while typing.

Declaration
[Parameter]
public bool Autofill { get; set; }
Property Value
Type Description
bool

A boolean where true enables autofill functionality; otherwise, false. The default value is false.
Remarks

When set to true, the ComboBox automatically completes the input with the first matching item from the data source as the user types. This enhances the user experience by suggesting relevant options dynamically.

Examples
<SfComboBox TValue="string" TItem="string" Autofill="true" DataSource="@MyList" />
@code {
    protected List<string> MyList = new List<string> { "Apple", "Banana", "Orange" };
}

IsClearButtonStopPropagation

Declaration
protected bool IsClearButtonStopPropagation { get; set; }
Property Value
Type
bool

ShowClearButton

Gets or sets a value indicating whether the ComboBox displays a clear button to reset the selected value.

Declaration
[Parameter]
public override bool ShowClearButton { get; set; }
Property Value
Type Description
bool

A boolean where true displays the clear button; otherwise, false. The default value is true.
Overrides
Remarks

When the clear button is clicked, the Value and Index properties are reset to null, allowing users to easily clear the current selection and start anew. This feature enhances usability by providing a quick way to reset the input.

Examples
<SfComboBox TValue="string" TItem="string" ShowClearButton="true" DataSource="@MyList" />
@code {
    protected List<string> MyList = new List<string> { "Apple", "Banana", "Orange" };
}

ValidateOnInput

Gets or sets a value indicating whether the ComboBox performs validation on input changes.

Declaration
[Parameter]
public bool ValidateOnInput { get; set; }
Property Value
Type Description
bool

A boolean where true enables validation on input; otherwise, false. The default value is false.
Remarks

When set to true, the ComboBox validates the input as the user types and updates the model value. The ValueChange event is triggered after the component loses focus, allowing for form validation or further processing of the input value.

Examples
<SfComboBox TValue="string" TItem="string" ValidateOnInput="true" DataSource="@MyList">
    <ComboBoxEvents TValue="string" TItem="string" ValueChange="@OnValueChange" />
</SfComboBox>
@code {
    protected List<string> MyList = new List<string> { "Apple", "Banana", "Orange" };
    private void OnValueChange(ChangeEventArgs<string, string> args)
    {
        // Handle value change
    }
}

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
RenderTreeBuilder __builder
Overrides

IsCustomValue()

Declaration
protected override bool IsCustomValue()
Returns
Type
bool
Overrides

Implements