Skip to main content

​
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

NameTypeDescription
namestringUnique identifier for the Single Select component.
optionsArray<string>An array of strings providing the options available to select.
selectedOptionstringA string representing the currently selected option.
selectStyleSingleSelectStyleAn 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.
NameDescription
textFontThe font of the text.
textColorThe color of the text.
optionBackgroundThe background color of an option.
optionBorderThe border of an option.
optionBorderRadiusThe border radius of an option.
hoverTextFontThe font of the text when an option is hovered.
hoverTextColorThe color of the text when an option is hovered.
hoverTextBackgroundThe background of an option when hovered.
activeTextBackgroundThe background of the selected option.
activeTextColorThe color of the selected option.
activeTextFontThe font of the selected option.

​
Events

NameDescription
cc-single-select-changedThis 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;
⌘I