HxCheckbox #

Checkbox input.
(Replaces the former HxInputCheckbox component which was dropped in v 4.0.0.)

HxCheckbox replaces the former HxInputCheckbox component, which was dropped in v4.0.0.

HxInputCheckbox.Label is now HxCheckbox.Text
new Label parameter coresponds to the optional .form-label

Basic usage #

Label

A simple checkbox

Checked: False

<HxCheckbox @bind-Value="isChecked" Text="A simple checkbox" Label="Label" />

Checked: @isChecked

@code {
    bool isChecked;
}

Inline #

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

Our CSS defaults bring flex-column to <form> element (EditForm component), every single direct child component of <form> is stacked vertically.
This setup implies, whenever you want to go for horizontal stacking, you have to wrap your items in some element (usually <div>). This also applies to the inline checkboxes.

First checkbox

Second checkbox

Reverse #

Put the checkbox on the opposite side by setting the Reverse parameter to true.

A simple checkbox

Button groups #

HxCheckbox can be used within HxButtonGroup.

API #

Parameters #

Name	Type	Description
AdditionalAttributes	`IReadOnlyDictionary<string, object>`	A collection of additional attributes that will be applied to the created element.
ChipTemplate	`RenderFragment`	Chip template.
CssClass	`string`	Custom CSS class to render with wrapping div.
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`. Works only when there is no label, no hint and no validation message.
InputCssClass	`string`	Custom CSS class to render with the input element.
Label	`string`	Label text.
LabelCssClass	`string`	Custom CSS class to render with the label.
LabelTemplate	`RenderFragment`	Label content.
Reverse	`bool`	Put the checkbox on the opposite side - first text, then checkbox.
Settings	`CheckboxSettings`	Set of settings to be applied to the component instance.
Text	`string`	Text to display next to the checkbox.
TextCssClass	`string`	CSS class to apply to the text.
TextTemplate	`RenderFragment`	Content to display next to the checkbox.
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	`bool`	Value of the input. This should be used with two-way binding.
ValueChanged	`EventCallback<bool>`	A callback that updates the bound value.
ValueExpression	`Expression<Func<bool>>`	An expression that identifies the bound value.

Methods #

Method	Returns	Description
FocusAsync()	`ValueTask`	Gives focus to the input element.