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

# SingleSelect

> SingleSelect — CometChat documentation.

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

      // Define the event handler
      const handleOptionChange = (event) => {
        console.log('Selected option: ', event.detail.value);
      }

      return (
        <div className="App">
          <cometchat-single-select
            name="mySingleSelect" 
            options='["Option 1", "Option 2", "Option 3"]' 
            selectedOption="Option 1"
            selectStyle=${selectStyle}
            @cc-single-select-changed=${handleOptionChange}
          ></cometchat-single-select>
        </div>
      );
    }

    export default App;
    ```
  </Tab>
</Tabs>