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

# 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/v4/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>


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