blazor-devexpress-dot-blazor-dot-dxcheckbox-1.md
A check box control that allows users to toggle between two or three states.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
public class DxCheckBox<T> :
DxDataEditor<T>,
IFocusableEditor,
ICheckBoxInternalOwner,
IRequireSelfCascading
| Name | Description |
|---|---|
| T |
The data type.
|
DevExpress CheckBox for Blazor (DxCheckBox) supports the checked, unchecked, and indeterminate (optional) states.
To switch the state, users can click the checkbox or press Space when the checkbox is focused.
Follow the steps below to add the CheckBox component to an application:
<DxCheckBox>…</DxCheckBox> markup to a .razor file.Refer to the following list for the component API reference: DxCheckBox Members.
Blazor CheckBox does not support static render mode. Enable interactivity to use the component in your application. Refer to the following topic for more details: Enable Interactive Render Mode.
The Checked property specifies a checkbox’s state. The Checked property’s type defines whether the checkbox supports the indeterminate state.
|
Data Type
|
Checked State
|
Unchecked State
|
Indeterminate State
| | --- | --- | --- | --- | |
|
true
|
false
|
(not supported)
| |
|
true
|
false
|
null
| |
|
“true”
|
“false”
|
null or any other value
| |
Unsigned Integer Numeric Types
|
1
|
0
|
2 or any other value
| |
|
1
|
0
|
-1 or any other value
| |
|
1
|
0
|
-1 or any other value
| |
Other Data Types
|
See Bind to Custom Data Types for additional information.
|
Run Demo: CheckBox - OverviewRun Demo: CheckBox - Customize Layout
The following sample creates a checkbox with the checked and unchecked states. The Checked property is bound to a Boolean object. The default checkbox state is unchecked.
<DxCheckBox @bind-Checked="@Value">@GetText()</DxCheckBox>
@code{
bool Value { get; set; }
string GetText() {
if (Value) return "Checked";
else return "Unchecked";
}
}
The following sample creates a checkbox with the indeterminate state. The Checked property is bound to a Nullable Boolean object.
Set the AllowIndeterminateStateByClick property to true to allow users to set the indeterminate state.
<DxCheckBox @bind-Checked="@Value" AllowIndeterminateStateByClick="true">@GetText()</DxCheckBox>
@code{
bool? Value { get; set; }
string GetText() {
if (Value == true) return "Checked";
if (Value == false) return "Unchecked";
return "Indeterminate";
}
}
The default checkbox state is indeterminate. Users can change the state in the following order: Indeterminate → Checked → Unchecked → Indeterminate, and so on.
If the AllowIndeterminateStateByClick is set to false, users can switch states in the following order: Indeterminate (default) → Checked → Unchecked → Checked → Unchecked, and so on.
The CheckedChanged event occurs each time the Checked property value changes. The following example handles this event and use the current checkbox state to enable/disable other checkboxes (change the Enabled property value):
<DxCheckBox Checked="@Checked" CheckedChanged="@((bool value) => OnCheckedChanged(value))">Silent Mode</DxCheckBox>
<DxCheckBox @bind-Checked="@SubChecked1" Enabled="@Enabled">Enable sound</DxCheckBox>
<DxCheckBox @bind-Checked="@SubChecked2" Enabled="@Enabled">Enable vibration</DxCheckBox>
@code{
bool Enabled { get; set; } = false;
bool Checked { get; set; } = true;
bool SubChecked1 { get; set; } = true;
bool SubChecked2 { get; set; } = false;
void OnCheckedChanged(bool value) {
Checked = value;
Enabled = !value;
}
}
You can also bind <DxCheckBox>‘s state to a custom data type (Enum, Object, etc.) Use the following properties to explicitly specify how to consider type values:
If a value is not equal to the specified properties, it is considered as indeterminate.
The following example binds the <DxCheckBox> to an Enum object:
<DxCheckBox Checked="Opinion.Yes" Enabled="false" ValueChecked="@Opinion.Yes"
ValueUnchecked="@Opinion.No" ValueIndeterminate="@Opinion.Abstain">Disabled Checked</DxCheckBox>
<DxCheckBox Checked="Opinion.No" Enabled="false" ValueChecked="@Opinion.Yes"
ValueUnchecked="@Opinion.No" ValueIndeterminate="@Opinion.Abstain">Disabled Unchecked</DxCheckBox>
<DxCheckBox Checked="Opinion.Abstain" Enabled="false" ValueChecked="@Opinion.Yes"
ValueUnchecked="@Opinion.No" ValueIndeterminate="@Opinion.Abstain">Disabled Indeterminate</DxCheckBox>
@code{
enum Opinion { Yes, No, Abstain }
}
Run Demo: CheckBox - Bind to Custom Data Types
Set the CheckType property to Switch to display the <DxCheckBox> as a toggle switch.
<DxCheckBox CheckType="CheckType.Switch" Checked="@Checked"
CheckedChanged="@((bool value) => CheckedChanged(value))">Silent Mode</DxCheckBox>
<DxCheckBox CheckType="CheckType.Switch" @bind-Checked="@SubChecked1" Enabled="@Enabled">Enable sound</DxCheckBox>
<DxCheckBox CheckType="CheckType.Switch" @bind-Checked="@SubChecked2" Enabled="@Enabled">Enable vibration</DxCheckBox>
@code{
bool Enabled { get; set; } = false;
bool Checked { get; set; } = true;
bool SubChecked1 { get; set; } = true;
bool SubChecked2 { get; set; } = false;
void CheckedChanged(bool value) {
Checked = value;
Enabled = !value;
}
}
Users can choose between the checked and unchecked states. The indeterminate state is not supported in this mode and is considered as unchecked.
Run Demo: CheckBox - Switch Mode
Use the Alignment and LabelPosition properties to align the checkbox’s child content (text label) and check mark relative to each other.
<div>
<div>
<DxCheckBox Checked="true"
LabelPosition="LabelPosition.Left"
Alignment="CheckBoxContentAlignment.Center">Multimedia</DxCheckBox>
</div>
<div>
<DxCheckBox Checked="false"
LabelPosition="LabelPosition.Left"
Alignment="CheckBoxContentAlignment.Center">Air Conditioning</DxCheckBox>
</div>
@* ... *@
</div>
If the label is too long to fit the parent component’s width, you can use the LabelWrapMode property to specify how to treat the remaining part of the label.
<div class="my-container">
<DxCheckBox @bind-Checked="@Value" LabelWrapMode="LabelWrapMode.NoWrap">Parking camera</DxCheckBox>
<DxCheckBox @bind-Checked="@Value" LabelWrapMode="LabelWrapMode.WordWrap">Heated seats</DxCheckBox>
<DxCheckBox @bind-Checked="@Value" LabelWrapMode="LabelWrapMode.Ellipsis">Air conditioning</DxCheckBox>
</div>
@code {
bool Value { get; set; }
}
.my-container {
width: 80px;
border: 1px dashed black;
}
Run Demo: CheckBox - Alignment
You can customize the appearance of the checkbox (or toggle switch). To do this, define the appearance between the <DxCheckBox> and </DxCheckBox> tags and set the DisableDefaultRender property to true to hide the check mark (toggle switch).
<DxCheckBox @bind-Checked="@Value" DisableDefaultRender="true">
// Add child content here...
</DxCheckBox>
@code{
bool? Value { get; set; } = true;
// ...
}
Run Demo: CheckBox - Custom Appearance
You can add a standalone checkbox or the Form Layout component to Blazor’s standard EditForm. This form validates user input based on data annotation attributes defined in a model and indicates errors.
<EditForm Model="@model" Context="EditFormContext">
<DataAnnotationsValidator />
<DxFormLayout >
<DxFormLayoutItem Caption="Checked:" ColSpanMd="6" >
<Template >
<DxCheckBox @bind-Checked="@model.Checked" />
</Template>
</DxFormLayoutItem>
@*...*@
</DxFormLayout>
</EditForm>
@code {
private Model model = new Model();
}
public class Model
{
[Required]
public bool? Checked { get; set; }
// ...
}
For additional information, refer to the following help topic: Validate Input.
If a Blazor application throws unexpected exceptions, refer to the following help topic: Troubleshooting.
Object ComponentBase DxComponentBase DxDataEditor<T> DxCheckBox<T>
See Also