HAVIT Blazor

HxCheckboxList #

Renders a multi-selection list of HxCheckbox controls.

Basic usage #

Selected employee IDs: 

@inject IDemoDataService DemoDataService

<HxCheckboxList TItem="EmployeeDto"
				TValue="int"
				Label="Employees"
				Data="@data"
				ItemTextSelector="@(employee => employee.Name)"
				ItemValueSelector="@(employee => employee.Id)"
				@bind-Value="selectedEmployeeIds" />

<p class="mt-2">
	Selected employee IDs: @String.Join(", ", selectedEmployeeIds.Select(i => i.ToString()) ?? Enumerable.Empty<string>())
</p>

@code
{
	private IEnumerable<EmployeeDto> data;
	private List<int> selectedEmployeeIds { get; set; } = new();

	protected override async Task OnParametersSetAsync()
	{
		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 checkboxes 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 checkboxes on the same horizontal row by rendering them inline. The default is false.
InputCssClass string The custom CSS class to render with the input element.
ItemCssClass string Additional CSS class(es) for the underlying HxCheckbox.
ItemCssClassSelector Func<TItem, string> Additional CSS class(es) for the HxCheckbox.
ItemInputCssClass string Additional CSS class(es) for the input element of the HxCheckbox.
ItemInputCssClassSelector Func<TItem, string> Additional CSS class(es) for the input element of the HxCheckbox.
ItemSortKeySelector Func<TItem, IComparable> Selects the value for item sorting. When not set, the ItemTextSelector property will be used. If you need complex sorting, pre-sort the data manually or create a custom comparable property.
ItemTextCssClass string Additional CSS class(es) for the text of the HxCheckbox.
ItemTextCssClassSelector Func<TItem, string> Additional CSS class(es) for the text of the HxCheckbox.
ItemTextSelector Func<TItem, string> Selects the text to display from the item. 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 CheckboxListSettings 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 List<TValue> Value of the input. This should be used with two-way binding.
ValueChanged EventCallback<List<TValue>> A callback that updates the bound value.
ValueExpression Expression<Func<List<TValue>>> An expression that identifies the bound value.

Methods #

Method Returns Description
FocusAsync() ValueTask Throws NotSupportedException - giving focus to an input element is not supported on the HxCheckboxList.
An unhandled error has occurred. Reload 🗙