> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkbox

> Checkbox — CometChat documentation.

## Overview

This element allow the user to select one or more items from a set.

## Properties

| Name | Type | Description |
| - | - | - |
| name | string | Name of the element |
| labelText | string | Caption text of the element |
| checked | boolean | When set to true, element is checked by default |
| disabled | boolean | When set to true, disables the element |
| checkboxStyle | [CheckboxStyle](/ui-kit/angular/v4/checkbox#checkboxstyle) | Styling properties and values of the element |

## CheckboxStyle

Styling properties and values of the element

| Name | Description |
| - | - |
| width | Sets the width of the element |
| height | Sets the height of the element |
| border | Sets the border of the element |
| borderRadius | Sets the border radius of the element |
| background | Sets all background style properties at once, such as color, image, origin and size, or repeat method. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |
| labelTextFont | Sets all the different properties of font for the caption text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font) |
| labelTextColor | Sets the foreground color of caption text. |
| checkedBackgroundColor | Sets the background color when the element is in checked state |
| uncheckedBackgroundColor | Sets the background color when the element is in unchecked state |

## Events

Events triggered by the element

| Name | Description |
| - | - |
| cc-checkbox-changed | Triggered when user updates or modifies the element |

## Usage

<Tabs>
  <Tab title="HTML">
    ```html theme={null}
    <cometchat-checkbox 
    [labelText]="'Checkbox 1'"
    [checked]="true"
    (cc-checkbox-changed)="changeHandler($event)"
    ></cometchat-checkbox>
    ```
  </Tab>

  <Tab title="JavaScript">
    ```js theme={null}
    import '@cometchat/uikit-elements';//import the web component package.

    changeHandler = (event: any) => {
      console.log(event.detail.url);
    }
    ```
  </Tab>
</Tabs>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.