HxSelect #

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

Basic usage #

Employee

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 #

Best employeeEmployees

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?`	Label type.
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).