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