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

# Single Select

> Single Select — CometChat documentation.

## Overview

The `CometChatSingleSelect` component is a customizable Single Select component that allows you to choose one option from a list of box-structured options. It extends from the LitElement's base class.

While this design allows an intuitive interaction similar to radio buttons, its unique box-style presentation provides a distinctive user experience. If only two options are provided, they are displayed side-by-side. For more than two options, they are displayed vertically.

## Attributes

| Name           | Type                                                                | Description                                                                                       |
| -------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| name           | string                                                              | Unique identifier for the Single Select component.                                                |
| options        | Array\<string>                                                      | An array of strings providing the options available to select.                                    |
| selectedOption | string                                                              | A string representing the currently selected option.                                              |
| selectStyle    | [SingleSelectStyle](/ui-kit/angular/singleselect#singleselectstyle) | An instance of the `SingleSelectStyle` class for customizing the Single Select component's style. |

## SingleSelectStyle

The appearance of the `CometChatSingleSelect` component is controlled via the `selectStyle` attribute, which takes an instance of the `SingleSelectStyle` class.

| Name                 | Description                                      |
| -------------------- | ------------------------------------------------ |
| textFont             | The font of the text.                            |
| textColor            | The color of the text.                           |
| optionBackground     | The background color of an option.               |
| optionBorder         | The border of an option.                         |
| optionBorderRadius   | The border radius of an option.                  |
| hoverTextFont        | The font of the text when an option is hovered.  |
| hoverTextColor       | The color of the text when an option is hovered. |
| hoverTextBackground  | The background of an option when hovered.        |
| activeTextBackground | The background of the selected option.           |
| activeTextColor      | The color of the selected option.                |
| activeTextFont       | The font of the selected option.                 |

## Events

| Name                     | Description                                                                                                                                                         |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| cc-single-select-changed | This event is dispatched when an option is selected. The event's `detail` property will contain an object with a `value` property representing the selected option. |

## Usage

<Tabs>
  <Tab title="HTML">
    ```html theme={null}
    <cometchat-single-select
      [name]="'mySingleSelect'" 
      [options]="['Option 1', 'Option 2', 'Option 3']" 
      [selectedOption]="'Option 1'"
      [selectStyle]="selectStyle"
      (cc-single-select-changed)="changeHandler($event)"
    ></cometchat-single-select>
    ```
  </Tab>

  <Tab title="JavaScript">
    ```js theme={null}
    import '@cometchat/uikit-elements';//import the web component package.
    import { SingleSelectStyle } from '@cometchat/uikit-elements'
    function App() {
      // Define the styles
    selectStyle = new SingleSelectStyle({
        height: "40px",
        width: "200px",
        background: "lightgrey",
        textFont: '600 14px Inter, sans-serif',
        textColor: 'grey',
        optionBackground: 'white',
        optionBorder: '1px solid grey',
        optionBorderRadius: '4px',
        hoverTextFont: '600 14px Inter, sans-serif',
        hoverTextColor: 'black',
        hoverTextBackground: 'lightgrey',
        activeTextBackground: 'darkgrey',
        activeTextColor: 'white',
        activeTextFont: '600 14px Inter, sans-serif'
      });

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