# Checkbox

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

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FFMhB0mghl5WN8oGab2zW%2Fcheckbox%20.gif?alt=media&#x26;token=197493f8-6016-410a-9efc-5eeac977068c" alt=""><figcaption></figcaption></figure>

The checkbox is used to filter data on any associated components. Enabling a checkbox will change the data displayed in the associated components.

## **Best Situation to use Checkbox**

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

## **Default Checkbox Image**

![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FtyMz2oApBxosMAQo0IfT%2FDefault%20Component%20Image.png?alt=media\&token=f88a4cc5-bc80-4e0d-b76c-f933e44defcc)

## Properties of the Checkbox filter <a href="#properties-of-the-check-box-filter" id="properties-of-the-check-box-filter"></a>

### **General**

* The user can change the height, width, top, and left position for the checkbox filter component.
* The user can set a name to the label and change its font color-style-weight-family from the General Properties.
* If the ***Show Checked*** option is enabled a checkmark will appear by default.
* Chrome color is used to set the component background, the user can change its transparency.
* 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, the chart won’t be available for the first preview.*&#x200B;
{% endhint %}

![](https://4050469960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnyOeUTaPuBluyvesHVm9%2Fuploads%2FTJD5T3fvSMo0idulVNk2%2Fimage.png?alt=media\&token=4fc8abeb-3482-4241-9a92-2b5863d9c01f)​

### Multi-checkbox Settings

The user can provide multiple checkboxes while enabling this property option.

* **Multiple Checkboxes**: Enable the ***Multiple Checkboxes*** option from the ***MultiCheckbox Settings*** property to add multiple checkboxes with labels.     &#x20;

<figure><img src="https://4050469960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnyOeUTaPuBluyvesHVm9%2Fuploads%2FREL1Tf9sXfXeaTxHWoYn%2Fimage.png?alt=media&#x26;token=86271630-9b1e-4e01-a4a4-4c04fa84d543" alt=""><figcaption></figcaption></figure>

* **Toggle Checkboxes**: Enable the option to access the new Toggle Switch UI as checkboxes.

<figure><img src="https://4050469960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnyOeUTaPuBluyvesHVm9%2Fuploads%2FoFbsFQFXb6tfxkN5GcwA%2Fimage.png?alt=media&#x26;token=113c3857-ba1c-441d-b9a5-d67d28ce266d" alt=""><figcaption></figcaption></figure>

* **Manage Checkbox**: Click the ***Manage Checkbox*** icon to access the dialog window for managing multiple checkboxes.       &#x20;
  * The user can add or delete checkboxes.
  * Provide Label Text, select the default display to be checked or unchecked, and provide value for the checked toggle checkboxes.

<figure><img src="https://4050469960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnyOeUTaPuBluyvesHVm9%2Fuploads%2FymBMvm1keLPK8QmWVrtL%2Fimage.png?alt=media&#x26;token=0fd419eb-1bdb-4805-97d3-7a443010bc08" alt=""><figcaption></figcaption></figure>

* **Direction**: Select an option from the drop-down menu to choose the direction of the checkboxes. It can be **Horizontal** or **Vertical**.

### Toggle Style

The user can style the toggle switch UI using the Toggle Style property option.

* The user can modify the Width, Height, and Toggle Switch Shape (Round or Square) from the ***Toggle Stypes*** property option.
* The user can also define colors for the Toggle Slider, Checked Color, and UnChecked Color.

<figure><img src="https://4050469960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnyOeUTaPuBluyvesHVm9%2Fuploads%2FH6RUjCUmcarLEbZ6AMB6%2Fimage.png?alt=media&#x26;token=6784d1b6-c07f-4708-8cb1-1541cc6e94f4" alt=""><figcaption></figcaption></figure>

### **Background**

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

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FGMOA8k0dYbVxnVqOVuhQ%2Fimage.png?alt=media&#x26;token=e37c17db-6823-43b4-a218-9abe11990890" alt=""><figcaption></figcaption></figure>

## **Modified Checkbox filter after changing its properties**

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

## Checkbox Use Case <a href="#check-box-use-case" id="check-box-use-case"></a>

The following use case explains the steps 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.

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FNlchhfrbPRxFPGlZUoYd%2Fimage.png?alt=media&#x26;token=b6d1c334-20e5-4876-a985-87ac723bc461" alt=""><figcaption></figcaption></figure>

* Drag a Checkbox component from the Filter group to the canvas.

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FErCIrasuffNnKYCRDh8y%2Fimage.png?alt=media&#x26;token=29849b1d-dfe5-4f03-a6c5-7b3dee84318f" alt=""><figcaption></figcaption></figure>

* Open the Checkbox 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://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FmpghkNgM5333rCPZBsTp%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.

![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2Ftju9IMApqqWByqoUuTes%2Fimage.png?alt=media\&token=dbb0c1e0-85dd-40c8-8e9e-dc22c7914d8f)

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

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FbjBYKHifcaZJWZbsklL8%2Fimage.png?alt=media&#x26;token=5a40ab96-ecdd-4027-936e-d24d76f913cd" alt=""><figcaption></figcaption></figure>

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

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

* Use a checkmark in the given box to display the ***Checked Value*** in the chart.

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FNfcUG7SUit8XPVhd0hKu%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).

​