Class SfCheckBox<TChecked>

Represents a configurable CheckBox component which allows the user to select, deselect, or display an indeterminate state. This component supports checked, unchecked, and indeterminate states, and can be used in forms or as a standalone UI input to collect binary or triple-state responses.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
SfBaseComponent
SfInputBase<TChecked>
SfCheckBox<TChecked>
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Buttons
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfCheckBox<TChecked> : SfInputBase<TChecked>, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Type Parameters
Name
TChecked
Remarks

The SfCheckBox<TChecked> component supports checked, unchecked, and indeterminate states. It provides support for two-state and tristate selection patterns with flexible property configuration, including custom label positioning, enable/disable tri-state, RTL support, and accessibility options. The checkbox state can be two or three states based on the EnableTriState property and is intended for both standalone use and within forms.

Examples

The following example demonstrates how to instantiate a basic checkbox that is initially checked.

<SfCheckBox Checked="true">
</SfCheckBox>

Constructors

SfCheckBox()

Declaration
public SfCheckBox()

Properties

EnableTriState

Gets or sets a value indicating whether the checkbox supports tristate (checked, unchecked, and indeterminate).

Declaration
[Parameter]
public bool EnableTriState { get; set; }
Property Value
Type Description
bool

true if the tristate mode is enabled. The default value is false.
Remarks

If enabled, the checkbox can display three states: checked, unchecked, and indeterminate. This state depends on the combination of the Checked and Indeterminate properties. Tristate mode is useful for representing partial selections, such as in select-all scenarios.

Examples
<SfCheckBox EnableTriState="true">
</SfCheckBox>

Indeterminate

Gets or sets a value that specifies whether the checkbox is in the indeterminate state.

Declaration
[Parameter]
public bool Indeterminate { get; set; }
Property Value
Type Description
bool

true if the checkbox state is indeterminate; otherwise, false. The default value is false.
Remarks

Setting Indeterminate places the checkbox in the indeterminate state, which overrides the Checked property during the initial render. Use this state when the selection is partial or undefined.

Examples
<SfCheckBox Indeterminate="true">
</SfCheckBox>

Label

Gets or sets the label text that is displayed next to the checkbox.

Declaration
[Parameter]
public string Label { get; set; }
Property Value
Type Description
string

A string representing the label content for the checkbox. The default value is String.Empty.
Remarks

This property specifies the descriptive text shown beside the checkbox element. Assign a value to visually describe the purpose of the checkbox to users.

Examples
<SfCheckBox Label="Accept Terms">
</SfCheckBox>

LabelPosition

Gets or sets a value that determines the placement of the label in relation to the checkbox.

Declaration
[Parameter]
public LabelPosition LabelPosition { get; set; }
Property Value
Type Description
LabelPosition

One of the LabelPosition enumeration values which can be Before or After. The default value is Before.
Remarks

If set to Before, the label appears to the left side of the checkbox; if set to After, the label appears to the right side. Use this property to customize the layout and improve accessibility.

Examples
<SfCheckBox Label="I agree" LabelPosition="LabelPosition.After">
</SfCheckBox>

ValueChange

Gets or sets an event callback that is invoked when the checked, unchecked, or indeterminate state of the checkbox changes due to a UI interaction.

Declaration
[Parameter]
public EventCallback<ChangeEventArgs<TChecked>> ValueChange { get; set; }
Property Value
Type Description
EventCallback<ChangeEventArgs<TChecked>>

An EventCallback<ChangeEventArgs<TChecked>> that is triggered whenever the state of the checkbox is altered by the user. The callback argument contains the updated checked state and the UI event.
Remarks

This event is only raised from UI-based interactions (such as mouse/touch clicks), and not from programmatic changes. Handle this event to react to state changes for form submission, validation, or other logic.

Examples
<SfCheckBox ValueChange="@Changed">
</SfCheckBox>
@code {
    private void Changed(ChangeEventArgs<bool> args)
    {
        // Handle checkbox value change.
    }
}

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
RenderTreeBuilder __builder
Overrides

InitRender(bool)

Declaration
protected override void InitRender(bool isDynamic = false)
Parameters
Type Name Description
bool isDynamic
Overrides

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered.

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
bool firstRender

Set to true for the first time component rendering; otherwise gets false.
Returns
Type Description
Task

A System.Threading.Tasks.Task representing any asynchronous operation.
Overrides

Implements