HxSelect #

Select - DropDownList - single-item picker. Consider creating a custom picker derived from HxSelectBase.

Basic usage #

Selected employee ID:

@inject IDemoDataService DemoDataService

<HxSelect TItem="EmployeeDto"
		  TValue="int?"
		  Label="Employee"
		  Data="data"
		  @bind-Value="employeeId"
		  TextSelector="@(employee => employee.Name)"
		  ValueSelector="@(employee => employee.Id)"
		  Nullable="true"
		  NullText="-select employee-"
		  NullDataText="Loading employees..." />

<p class="mt-2">Selected employee ID: @employeeId</p>

@code {
	private IEnumerable<EmployeeDto> data;
	private int? employeeId;

	protected override async Task OnInitializedAsync()
	{
		data = await DemoDataService.GetAllEmployeesAsync();
	}
}

Note: The demos on this page use DemoDataService, in-memory simulation of a simple data store. Find the implementation on GitHub.

Input groups #

Employees

API #

Parameters #

Name Type Description
AdditionalAttributes IReadOnlyDictionary<string, object> A collection of additional attributes that will be applied to the created element.
AutoSort bool When true, the items are sorted before displaying in the select. The default value is true.
ChipTemplate RenderFragment The chip template.
CssClass string The custom CSS class to render with the wrapping div.
Data IEnumerable<TItem> The items to display.
DisplayName string Gets or sets the display name for this field.
This value is used when generating error messages when the input value fails to parse correctly.
Enabled bool? When null (default), the Enabled value is received from the cascading FormState. When the value is false, the input is rendered as disabled. To set multiple controls as disabled, use HxFormState.
GenerateChip bool When true, HxChipGenerator is used to generate chip item(s). The default is true.
Hint string The hint to render after the input as form-text.
HintTemplate RenderFragment The hint to render after the input as form-text.
InputCssClass string The custom CSS class to render with the input element.
InputGroupEndTemplate RenderFragment Input group at the end of the input.
InputGroupEndText string Input group at the end of the input.
InputGroupStartTemplate RenderFragment Input group at the beginning of the input.
InputGroupStartText string Input group at the beginning of the input.
InputSize InputSize? Size of the input.
Label string The label text.
LabelCssClass string The custom CSS class to render with the label.
LabelTemplate RenderFragment The label content.
LabelType LabelType?
Nullable bool? Indicates whether null is a valid value.
NullDataText string The text to display when Data is null.
NullText string The text to display for the null value.
Settings SelectSettings Set of settings to be applied to the component instance (overrides HxSelect.Defaults, overridden by individual parameters).
SortKeySelector Func<TItem, IComparable> Selects the value to sort items. Uses the TextSelector property when not set. When complex sorting is required, sort the data manually and don't let this component sort them. Alternatively, create a custom comparable property.
TextSelector Func<TItem, string> Selects the text to display from the item. When not set, ToString() is used.
ValidationMessageMode ValidationMessageMode? Specifies how the validation message should be displayed.
The default is ValidationMessageMode.Regular, you can override the application-wide default for all inputs in Defaults.
Value TValue Value of the input. This should be used with two-way binding.
ValueChanged EventCallback<TValue> A callback that updates the bound value.
ValueExpression Expression<Func<TValue>> An expression that identifies the bound value.
ValueSelector Func<TItem, TValue> Selects the value from the item. Not required when TValueType is the same as TItemTime.

Methods #

Method Returns Description
FocusAsync() ValueTask Gives focus to the input element.

Static properties #

Property Type Description
Defaults SelectSettings Application-wide defaults for the HxSelect (HxSelectBase and derived components, respectively).
An unhandled error has occurred. Reload 🗙