HxCheckbox #

Checkbox input.
(Replaces the former HxInputCheckbox component which is now obsolete.)

HxCheckbox replaces the former HxInputCheckbox component, which is now obsolete.

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.