HAVIT Blazor

HxRadioButtonList #

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

Basic usage #

Selected employee ID: 

@inject IDemoDataService DemoDataService

<HxRadioButtonList Label="Employee"
				   TItem="EmployeeDto"
				   TValue="int?"
				   Data="@data"
				   @bind-Value="@selectedEmployeeId"
				   ItemTextSelector="@(employee => employee.Name)"
				   ItemValueSelector="@(employee => employee.Id)" />

<p class="mt-2">Selected employee ID: @selectedEmployeeId</p>

@code {
	private IEnumerable<EmployeeDto> data;
	private int? selectedEmployeeId;

	protected override async Task OnInitializedAsync()
	{
		data = await DemoDataService.GetPreferredEmployeesAsync(count: 5);
	}
}

Note: The demos on this page use DemoDataService, in-memory simulation of a simple data store. Find the implementation on GitHub.

Inline #

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

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 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> 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.
Inline bool Allows grouping radios on the same horizontal row by rendering them inline. Default is false.
InputCssClass string The 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 the value to sort items. Uses the ItemTextSelector 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.
ItemTemplate RenderFragment<TItem> Gets the HTML to display from the 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 the text to display from the item. Also used for chip text. When not set, ToString() is used.
ItemValueSelector Func<TItem, TValue> Selects the value from the item. Not required when TValue is the same as TItem.
Label string The label text.
LabelCssClass string The custom CSS class to render with the label.
LabelTemplate RenderFragment The 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.
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.

Methods #

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