HxSelect #

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

Basic usage #

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

Input groups #

Select name

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, 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 HxFormState.
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.

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 🗙