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

# Checkbox

> Checkbox — CometChat documentation.

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](/web-elements/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="JavaScript">
    ```javascript theme={null}
    import '@cometchat/uikit-elements';//import the web component package.

    const changeHandler = event => {
      console.log(event.detail.checked);
    }

    <cometchat-checkbox 
    :labelText="Checkbox 1"
    :checked="true"
    @cc-checkbox-changed="changeHandler($event)" />
    ```
  </Tab>
</Tabs>