# Checkbox

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

<figure><img src="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FjQ3rov2zjzfoUrdyOxRC%2Fcheckbox%20.gif?alt=media&#x26;token=197493f8-6016-410a-9efc-5eeac977068c" 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="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FXe3AzwfOR8OLVmGST4Qw%2FDefault%20Component%20Image.png?alt=media&#x26;token=f88a4cc5-bc80-4e0d-b76c-f933e44defcc" 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 %}

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FtTE7Qaj87sB1ysAwAs26%2Fimage.png?alt=media\&token=ee7a9d6f-4386-4565-9df5-17d8717a8eeb)

#### **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;

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FLQt4LV5NAxZfrJ95hhJ1%2Fimage.png?alt=media\&token=e37c17db-6823-43b4-a218-9abe11990890)

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

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2Fe1VIIalapAMrhKLXQOTs%2Fimage.png?alt=media\&token=466e0022-08fb-48f0-a27a-a58da30837c7)

### 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="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FP2PqbmMUGGVt3fTFMKIU%2Fimage.png?alt=media&#x26;token=b6d1c334-20e5-4876-a985-87ac723bc461" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2F1Kjra2k7lf5JJoHzJGRl%2Fimage.png?alt=media&#x26;token=29849b1d-dfe5-4f03-a6c5-7b3dee84318f" 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="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FeaMPM9dM7VA7zRNRiCSw%2Fimage.png?alt=media&#x26;token=926b76a6-8b2c-480f-ac07-f952e46f5e55" alt=""><figcaption></figcaption></figure>
* Use the component object page to write the required script at the component level. &#x20;

<figure><img src="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FABWUGNYvYleWzSi2a9SC%2Fimage.png?alt=media&#x26;token=dbb0c1e0-85dd-40c8-8e9e-dc22c7914d8f" 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="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FAKnAwlpvZ9DBaU31EWKj%2Fimage.png?alt=media&#x26;token=5a40ab96-ecdd-4027-936e-d24d76f913cd" alt=""><figcaption></figcaption></figure>

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

&#x20;     ![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FEYXGRI0gbbhesm8XagAQ%2Fimage.png?alt=media\&token=86e9acfd-2ff4-4807-9718-b92fe1b368a8)

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

<figure><img src="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FHvP2L0rnFuatKw15qaTP%2Fimage.png?alt=media&#x26;token=a4d2fe73-024d-4cf4-9d9d-c079ee9e1500" 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="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2Fy3IgBxyeejEcE74GhUtz%2Fimage.png?alt=media&#x26;token=f0251396-0483-40d8-93ef-5c29e115e7dc" alt=""><figcaption></figcaption></figure>