Checkbox
Check out the given walk-through to understand the Check Box filter component.
![](https://docs.bdb.ai/~gitbook/image?url=https%3A%2F%2F859511478-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FGDmsjfjJBNqow7Fo97cO%252Fuploads%252FFMhB0mghl5WN8oGab2zW%252Fcheckbox%2520.gif%3Falt%3Dmedia%26token%3D197493f8-6016-410a-9efc-5eeac977068c&width=768&dpr=4&quality=100&sign=506a6ff5&sv=1)
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
Properties of the Check Box filter
General
The user can change the height, width, top and left position of the check box 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, then by default a checkmark will get enabled.
Chrome color is used to set the component background, also 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.
Please Note: If initial visibility is not enabled, then the chart won’t be available for the first preview.
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.
![](https://docs.bdb.ai/~gitbook/image?url=https%3A%2F%2F859511478-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FGDmsjfjJBNqow7Fo97cO%252Fuploads%252FGMOA8k0dYbVxnVqOVuhQ%252Fimage.png%3Falt%3Dmedia%26token%3De37c17db-6823-43b4-a218-9abe11990890&width=768&dpr=4&quality=100&sign=36e292d4&sv=1)
Modified Check box filter after changing its properties
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.
![](https://docs.bdb.ai/~gitbook/image?url=https%3A%2F%2F859511478-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FGDmsjfjJBNqow7Fo97cO%252Fuploads%252FNlchhfrbPRxFPGlZUoYd%252Fimage.png%3Falt%3Dmedia%26token%3Db6d1c334-20e5-4876-a985-87ac723bc461&width=768&dpr=4&quality=100&sign=9affe31e&sv=1)
Drag a Check Box component from the Filter group to the canvas.
![](https://docs.bdb.ai/~gitbook/image?url=https%3A%2F%2F859511478-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FGDmsjfjJBNqow7Fo97cO%252Fuploads%252FErCIrasuffNnKYCRDh8y%252Fimage.png%3Falt%3Dmedia%26token%3D29849b1d-dfe5-4f03-a6c5-7b3dee84318f&width=768&dpr=4&quality=100&sign=17b349b&sv=1)
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.
Use the component object page to write the required script at the component level.
Configure the Condition tab by providing a field value for the conditions (the field State is chosen in the given image).
![](https://docs.bdb.ai/~gitbook/image?url=https%3A%2F%2F859511478-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FGDmsjfjJBNqow7Fo97cO%252Fuploads%252FbjBYKHifcaZJWZbsklL8%252Fimage.png%3Falt%3Dmedia%26token%3D5a40ab96-ecdd-4027-936e-d24d76f913cd&width=768&dpr=4&quality=100&sign=2eb73813&sv=1)
Click the Preview icon to preview the Dashboard.
Use a check mark in the given box to display the Checked Value in the chart.
![](https://docs.bdb.ai/~gitbook/image?url=https%3A%2F%2F859511478-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FGDmsjfjJBNqow7Fo97cO%252Fuploads%252FNfcUG7SUit8XPVhd0hKu%252Fimage.png%3Falt%3Dmedia%26token%3Da4d2fe73-024d-4cf4-9d9d-c079ee9e1500&width=768&dpr=4&quality=100&sign=d9dbd62b&sv=1)
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).