Single Select

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

Javascript

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;