> ## 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.

# Dropdown

> Dropdown — CometChat documentation.

## Overview

This element is a stylised version of the select component. It allows the user to select one option from a list.

## Properties

| Name          | Type                                                    | Description                                                 |
| ------------- | ------------------------------------------------------- | ----------------------------------------------------------- |
| options       | Array of string                                         | List of options to choose from. These will appear on click. |
| arrowIconURL  | string                                                  | Asset URL of the arrow icon                                 |
| dropdownStyle | [DropdownStyle](/ui-kit/angular/dropdown#dropdownstyle) | Styling properties and values of the element                |

## DropdownStyle

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)                 |
| arrowIconTint           | Sets the color applied to the arrow icon                                                                                                                                                             |
| textFont                | Sets all the different properties of font for the option text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                                               |
| textColor               | Sets the foreground color of option text.                                                                                                                                                            |
| activeTextFont          | Sets all the different properties of font for the option text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                                               |
| activeTextColor         | Sets the foreground color of the active option text.                                                                                                                                                 |
| hoverTextFont           | Sets all the different properties of font for the option text on mouseover. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                                  |
| hoverTextColor          | Sets the foreground color of the active option text on mouseover.                                                                                                                                    |
| hoverTextBackground     | 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)                |
| optionBackground        | Sets all background style properties at once, such as color, image, origin and size, or repeat method for each option. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |
| optionBorder            | Sets the border of each option in the element                                                                                                                                                        |
| optionHoverBorder       | Sets the border of option when user hovers on it                                                                                                                                                     |
| optionBorderRadius      | Sets the border radius of the option in the element                                                                                                                                                  |
| optionHoverBorderRadius | Sets the border radius of option when user hovers on it                                                                                                                                              |

## Events

Events triggered by the element

| Name                | Description                                     |
| ------------------- | ----------------------------------------------- |
| cc-dropdown-changed | Triggered when the value of the element changes |

## Usage

<Tabs>
  <Tab title="HTML">
    ```html theme={null}
    <cometchat-dropdown 
    [options]="['Red', 'Orange', 'Green', 'Blue']"
    (cc-dropdown-changed)="changeHandler($event)"
    />
    ```
  </Tab>

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

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