> For the complete documentation index, see [llms.txt](https://docs.gapvelocity.ai/blazor-ai-migrator/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gapvelocity.ai/blazor-ai-migrator/blazor-ai-migrator/dcp-desktop-compatibility-library/components-information/checkbox.md).

# CheckBox

### **Description**

This component represents a checkbox in Blazor using the `Gap.Blazor.CheckBox` model. It integrates with Telerik UI components and supports dynamic styling and state management based on the model's properties.

### **Usage**

```

@using Gap.Blazor
@using Gap.Blazor.Components
@using Telerik.Blazor.Components
@inherits WMControlComponentBase
@namespace Gap.Blazor.Components

@if (model.Visible)
{
    <WMStyleBase model=@checkBox></WMStyleBase>
    <div class="@model.GetStringClasses()">
        <TelerikCheckBox Id="checkBoxControl" Enabled=@this.Enabled @bind-Value="@checkBox.Checked"/>
        <label for="checkBoxControl">@this.Text</label>
    </div>
    <style>
        .@model.GetComponentClass(){
        }
    </style>
}

```

### **Properties**

* **checkBox**: Instance of the `Gap.Blazor.CheckBox` model.

### **Methods**

* **OnInitialized()**: Initializes the component and subscribes to the `CheckedChanged` and `CheckStateChanged` events.

### **Dynamic Rendering**

The component dynamically renders a checkbox based on the `CheckBox` model properties:

* **WMStyleBase**: Applies styles based on the model.
* **TelerikCheckBox**: Represents the checkbox UI element.
* **Label**: Displays the associated text.

### **Styles**

The styles for the checkbox are defined within the component:

* **CSS Class**: Dynamically generated using `model.GetComponentClass()`.
* **Custom Styling**: Can be extended via `WMStyleBase` and model-based class logic.

### **Events**

* **CheckedChanged**: Triggered when the checkbox value changes.
* **CheckStateChanged**: Triggered when the check state changes (e.g., indeterminate).