Select - DropDownList - single-item picker. Consider creating custom picker derived from HxSelectBase
.
Selected initials:
<EditForm Model="model">
<DataAnnotationsValidator />
<HxSelect TItem="Person"
TValue="string"
Label="Band member"
Data="@people"
@bind-Value="@model.SelectedPersonInitials"
TextSelector="@(p => p.Name)"
ValueSelector="@(p => p.Initials)"
Nullable="true"
NullText="-select name-"
NullDataText="Loading band members..." />
<HxSubmit Text="Submit" Color="ThemeColor.Primary" />
</EditForm>
<p>Selected initials: @model.SelectedPersonInitials</p>
@code {
private FormModel model = new FormModel();
private List<Person> people;
protected override async Task OnInitializedAsync()
{
await Task.Delay(3000);
people = new List<Person>
{
new Person("Starr Ringo", "RS"),
new Person("Lennon John", "JL"),
new Person("McCartney Paul", "PMC"),
new Person("Harrison George", "GH")
};
}
internal class FormModel
{
[Required(ErrorMessage = "Choose a band member.")]
public string SelectedPersonInitials { get; set; }
}
record Person(string Name, string Initials);
}
Name | Type | Description |
---|---|---|
AdditionalAttributes | IReadOnlyDictionary<string, object> |
A collection of additional attributes that will be applied to the created element. |
AutoSort | bool |
When true , items are sorted before displaying in select.
Default value is true . |
ChipTemplate | RenderFragment |
Chip template. |
CssClass | string |
Custom CSS class to render with wrapping div. |
Data | IEnumerable<TItem> |
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 cascading FormState .
When value is false , input is rendered as disabled.
To set multiple controls as disabled use |
GenerateChip | bool |
When true , HxChipGenerator is used to generate chip item(s). Default is true . |
Hint | string |
Hint to render after input as form-text. |
HintTemplate | RenderFragment |
Hint to render after input as form-text. |
InputCssClass | string |
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 |
Label text. |
LabelCssClass | string |
Custom CSS class to render with the label. |
LabelTemplate | RenderFragment |
Label content. |
LabelType | LabelType? |
|
Nullable | bool? |
Indicates whether null is a valid value. |
NullDataText | string |
Text to display when Data is null . |
NullText | string |
Text to display for 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 value to sort items. Uses TextSelector property when not set.
When complex sorting required, sort data manually and don't let sort them by this component. Alternatively create a custom comparable property. |
TextSelector | Func<TItem, string> |
Selects text to display from item.
When not set ToString() is used. |
ValidationMessageMode | ValidationMessageMode? |
Specifies how the validation message should be displayed. Default is ValidationMessageMode.Regular , you can override application-wide default for all inputs in HxInputBase.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 value from item.
Not required when TValueType is same as TItemTime . |
Method | Returns | Description |
---|---|---|
FocusAsync() | ValueTask |
Gives focus to the input element. |
Property | Type | Description |
---|---|---|
Defaults | SelectSettings |
Application-wide defaults for the HxSelect (HxSelectBase and derived components respectively). |