HxRadioButtonList #

Data-based list of radio buttons. Consider creating custom picker derived from HxRadioButtonListBase.

Basic usage #

Selected initials:

<EditForm Model="model">
    <DataAnnotationsValidator />

    <HxRadioButtonList Label="Band member"
                       TItem="Person"
                       TValue="string"
                       Data="@people"
                       @bind-Value="@model.SelectedPersonInitials"
                       ItemTextSelector="@(p => p.Name)"
                       ItemValueSelector="@(p => p.Initials)" />

    <HxSubmit Text="Submit" Color="ThemeColor.Primary" />
</EditForm>

<p>Selected initials: @model.SelectedPersonInitials</p>

@code {
    private FormModel model = new FormModel();

    private List<Person> people = new List<Person>
{
        new Person { Name = "Starr Ringo", Initials = "RS" },
        new Person { Name = "Lennon John", Initials = "JL" },
        new Person { Name = "McCartney Paul", Initials = "PMC" },
        new Person { Name = "Harrison George", Initials = "GH" }
    };

    internal class FormModel
    {
        [Required(ErrorMessage = "Choose a band member.")]
        public string SelectedPersonInitials { get; set; }
    }

    internal class Person
    {
        public string Name { get; set; }
        public string Initials { get; set; }
    }
}

Inline #

Group radios on the same horizontal row by adding Inline="true".

Selected initials:

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
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.
Inline bool Allows grouping radios on the same horizontal row by rendering them inline. Default is false.
InputCssClass string Custom CSS class to render with the input element.
ItemCssClass string Additional CSS class(es) for underlying radio-buttons (wrapping div element).
ItemCssClassSelector Func<TItem, string> Additional CSS class(es) for underlying radio-buttons (wrapping div element).
ItemInputCssClass string Additional CSS class(es) for the input element of underlying radio-buttons.
ItemInputCssClassSelector Func<TItem, string> Additional CSS class(es) for the input element of underlying radio-button.
ItemSortKeySelector Func<TItem, IComparable> Selects value to sort items. Uses ItemTextSelector 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.
ItemTemplate RenderFragment<TItem> Gets html to display from item. When not set ItemTextSelector is used.
ItemTextCssClass string Additional CSS class(es) for the text of the underlying radio-buttons.
ItemTextCssClassSelector Func<TItem, string> Additional CSS class(es) for the text of the underlying radio-buttons.
ItemTextSelector Func<TItem, string> Selects text to display from item. Also used for chip text. When not set ToString() is used.
ItemValueSelector Func<TItem, TValue> Selects value from item. Not required when TValue is same as TItem.
Label string Label text.
LabelCssClass string Custom CSS class to render with the label.
LabelTemplate RenderFragment Label content.
Settings RadioButtonListSettings Set of settings to be applied to the component instance (overrides HxInputDate.Defaults, overridden by individual parameters).
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.

Methods #

Method Returns Description
FocusAsync() ValueTask Gives focus to the input element.
An unhandled error has occurred. Reload 🗙