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
The new Label parameter corresponds 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 the <form> element (EditForm component), every single direct child component of <form> is stacked vertically.
This setup implies that 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`	The chip template.
CssClass	`string`	The custom CSS class to render with the wrapping div.
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 value is `false`. This only works when there is no label, no hint, and no validation message.
InputCssClass	`string`	The custom CSS class to render with the input element.
Label	`string`	The label text.
LabelCssClass	`string`	The custom CSS class to render with the label.
LabelTemplate	`RenderFragment`	The 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. The default is `ValidationMessageMode.Regular`, you can override the application-wide default for all inputs in `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.