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

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

    const dStyle = new DropdownStyle({

    });

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

    <cometchat-dropdown 
    :options=['Red', 'Orange', 'Green', 'Blue']
    @cc-dropdown-changed="changeHandler($event)" />
    ```
  </Tab>
</Tabs>


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