DxCheckBox<T> Class

A CheckBox component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxCheckBox<T> :
    DxCheckBoxBase<T>

Type Parameters

Name Description
T

The data type.

Remarks

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.

Blazor-CheckBox-Overview

To add the <DxCheckBox> component to an application, follow the steps below:

  1. Create and configure the application as described in the Create a New Blazor Application document.

  2. Add the <DxCheckBox>...</DxCheckBox> markup to your application.

  3. Configure the component (see the sections below).

Checkbox States

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

Boolean

true

false

(not supported)

Nullable Boolean

true

false

null

String

"true"

"false"

null

or any other value

Byte

Int32

UInt32

Int64

Decimal

Single

Double

1

0

other values

Other Data Types

See Bind to Custom Data Types for more information.

Checked/Unchecked States

The following sample demonstrates how to create 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";
    }
}

Blazor-CheckBox-Two-States

Indeterminate State

The following sample demonstrates how to create 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.

Blazor-CheckBox-Three-States

If the AllowIndeterminateStateByClick is set to false, users can switch states in the following order: Indeterminate (default) -> Checked -> Unchecked -> Checked -> Unchecked, and so on.

Respond to State Changes

The CheckedChanged event occurs each time the Checked property value changes. The following example demonstrates how to handle this event and use the current checkbox state to enable/disable other checkboxes (change the Enabled property value):

<DxCheckBox Checked="@Checked" CheckedChanged="@CheckedChanged">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 CheckedChanged(bool value) {
        Checked = value;
        Enabled = !value;
        StateHasChanged();
    }
}

Blazor-CheckBox-CheckedChanged

Bind to Custom Data Types

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:

  • ValueChecked - Specifies a value that corresponds to the checked state.
  • ValueUnchecked - Specifies a value that corresponds to the unchecked state.
  • ValueIndeterminate - Specifies a value that corresponds to the indeterminate state.

If a value is not equal to the specified properties, it is considered as indeterminate.

The following example demonstrates how to bind the <DxCheckBox> to an Enum object:

<DxCheckBox @bind-Checked="@Value" AllowIndeterminateStateByClick ValueChecked="@Opinion.Yes" 
            ValueUnchecked="@Opinion.No" ValueIndeterminate="@Opinion.Abstain">@GetText()</DxCheckBox>
<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 }
    Opinion Value = Opinion.Abstain;

    string GetText() {
        if(Value == Opinion.Yes) return "Checked";
        if(Value == Opinion.No) return "Unchecked";
        return "Indeterminate";
    }
}

Blazor-CheckBox-Enabled

Switch Mode

Set the CheckType property to Switch to display the <DxCheckBox> as a toggle switch.

<DxCheckBox CheckType="CheckType.Switch" Checked="@Checked" CheckedChanged="@CheckedChanged">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;
        StateHasChanged();
    }
}

Blazor-CheckBox-CheckType-Switch-With-Enabled

Users can choose between the checked and unchecked states. The indeterminate state is not supported in this mode and is considered as unchecked.

NOTE

Online Demo: CheckBox - Switch Mode

Content Position

Use the LabelPosition property to specify the horizontal position of the checkbox's child content relative to the check mark.

<DxCheckBox Checked="true" LabelPosition="LabelPosition.Right">Text aligned to the right</DxCheckBox> 
<DxCheckBox Checked="true" LabelPosition="LabelPosition.Left">Text aligned to the left</DxCheckBox>

Blazor-CheckBox-LabelPosition

Custom Appearance

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;
    // ...
}

Blazor-CheckBox-Custom-Content

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.JSInteropProxyBase>
DevExpress.Blazor.Internal.DxEditorBase<T, DevExpress.Blazor.Internal.JSInterop.JSInteropProxyBase>
DxCheckBoxBase<T>
DxCheckBox<T>
See Also