Data-based list of radio buttons. Consider creating custom picker derived from HxRadioButtonListBase
.
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; }
}
}
Group radios on the same horizontal row by adding Inline="true"
.
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 |
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. |
Method | Returns | Description |
---|---|---|
FocusAsync() | ValueTask |
Gives focus to the input element. |