Renders a multi-selection list of HxCheckbox controls.
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.
Group checkboxes 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 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 |
| 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. |