# Checkbox

{% hint style="success" %}
*Check out the given walk-through to understand the Check Box filter component.* 
{% endhint %}

<figure><img src="/files/mRf8lW4XPO5OsefsHrcL" alt=""><figcaption></figcaption></figure>

Check Box is used to filter data on any associated components. Enabling a check box will change the data displayed in the associated components.

**Best Situation to use Check Box:**

* To filter data displayed in the associated components
* To select multiple items at a time

#### Default Checkbox Image:

<div align="left"><img src="/files/iwzWm0G7DWkcdRwLXLkl" alt=""></div>

### Properties of the Check Box filter:

#### **General**

* The user can change the height, width, top and left position of the check box filter component. &#x20;
* The user can set a name to the label and change its font color-style-weight-family from the General Properties.&#x20;
* &#x20;If the ***Show Checked*** option is enabled, then by default a checkmark will get enabled.&#x20;
* Chrome color is used to set the component background, also the user can change its transparency.&#x20;
* A value can be set to the ***Checked Value*** so that when the user clicks on the check box, this value will get passed.

{% hint style="info" %} <mark style="color:green;">Please Note</mark>: *If initial visibility is not enabled, then the chart won’t be available for the first preview.*
{% endhint %}

![](/files/51xPPXk4k4e65mBvzKwy)

#### **Background**

* The user can get the reflection of the chart by enabling the shadow option.&#x20;
* The user can also change the color and increase/decrease the transparency of the shadow.       &#x20;

![](/files/nhY2gL6KGt0SiVYkNHqk)

#### Modified Check box filter after changing its properties:

![](/files/cVin5dvpgTIAiBB2VKCm)

### Check Box Use Case

The following use case explains how to connect and use a Checkbox with a Data Grid component.

* Drag a Data Grid component to the Designer canvas.
* Associate a Data Connection with it.

&#x20;    &#x20;

<figure><img src="/files/sWDL9p13KiGTCoJU6qNf" alt=""><figcaption></figcaption></figure>

* Drag a Check Box component from the Filter group to the canvas.    &#x20;

<figure><img src="/files/pUHsj5nlLHmXWRuxLZMd" alt=""><figcaption></figcaption></figure>

* Open the Check box Properties, provide the necessary properties, and apply them.

  * Provide the text for the Label.
  * Provide the Checked Value.
  * Keep the Unchecked Value blank.

  <figure><img src="/files/e4dq0CHRVN24oILJReIS" alt=""><figcaption></figcaption></figure>
* Use the component object page to write the required script at the component level. &#x20;

<figure><img src="/files/dHf0AbMFoOpxsNWT2rY5" alt=""><figcaption></figcaption></figure>

* Configure the Condition tab by providing a field value for the conditions (the field State is chosen in the given image).    &#x20;

<figure><img src="/files/oC0zLjKszVw3eU491RsS" alt=""><figcaption></figcaption></figure>

* Click the ***Preview*** icon to preview the Dashboard.

&#x20;     ![](/files/aObx4BAgWbSj8S5ixuUg)

* Use a check mark in the given box to display the ***Checked Value*** in the chart. &#x20;

<figure><img src="/files/7uTl1XT77yELBXsLr7NJ" alt=""><figcaption></figcaption></figure>

* Uncheck the Check Box to display the ***Unchecked Value*** in the chart (In this case, no value has been assigned as Unchecked Value so it will display all the records).      &#x20;

<figure><img src="/files/s2GyfJUPuk3Lxwkbv549" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bdb.ai/bdb-documentation/data-visualization/governed-dashboards/charts-gallery/filters/checkbox.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.