HxCheckboxList

Renders a multi-selection list of HxCheckbox controls.

Basic usage

Selected values:

@using System.Globalization

<EditForm Model="@model">
    <HxCheckboxList TItem="CultureInfo"
                    TValue="string"
                    Label="Cultures"
                    ItemTextSelector="@(item => item.EnglishName)"
                    ItemValueSelector="@(item => item.EnglishName)"
                    Data="@data"
                    @bind-Value="@model.CultureInfos" />
</EditForm>

<p>Selected values: @String.Join(", ", model.CultureInfos ?? Enumerable.Empty<string>())</p>

@code
{
    private Model model = new Model();
    private List<CultureInfo> data = CultureInfo.GetCultures(CultureTypes.SpecificCultures)
        .OrderBy(item => item.EnglishName)
        .Take(10)
        .OrderByDescending(i => i.ToString()) // sorting test
        .ToList();

    private class Model
    {
        public List<string> CultureInfos { get; set; }
    }
}

Inline #

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

Selected values:

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 checkboxes 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 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 value for items sorting. When not set, TextSelector property will be used. If you need complex sorting, pre-sort 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 text to display from item. 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 CheckboxListSettings Set of settings to be applied to the component instance (overrides HxInputDate.Defaults, overriden by individual parameters).
SortKeySelector Func<TItem, IComparable> SortKeySelector is obsolete, please use ItemSortKeySelector instead.
TextSelector Func<TItem, string> TextSelector is obsolete, please use ItemTextSelector instead.
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 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.
ValueSelector Func<TItem, TValue> ValueSelector is obsolete, please use ItemValueSelector instead.

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 🗙