​
Overview

This element allows the user to exactly select one item from a set.

​
Properties

NameTypeDescription
namestringName of the element
labelTextstringCaption text of the element
checkedbooleanWhen set to true, element is checked by default
disabledbooleanWhen set to true, disables the element
radioButtonStyleRadioButtonStyleStyling properties and values of the element

​
RadioButtonStyle

Styling properties and values of the element
NameDescription
widthSets the width of the element
heightSets the height of the element
borderSets the border of the element
borderRadiusSets the border radius of the element
backgroundSets all background style properties at once, such as color, image, origin and size, or repeat method. Reference link
labelTextFontSets all the different properties of font for the caption text. Reference link
labelTextColorSets the foreground color of caption text.

​
Events

Events triggered by the element
NameDescription
cc-radio-button-changedTriggered when user updates or modifies the element

​
Usage

import '@cometchat/uikit-elements';//import the web component package.
import {RadioButtonStyle} from '@cometchat/uikit-elements'

const changeHandler = event => {
  console.log(event.detail.checked);
}

<fieldset>
  <legend>Select color:</legend>
  <cometchat-radio-button 
	:name="color"
  :labelText="Green"
  @cc-radio-button-changed="changeHandler($event)" /><br><br>
  <cometchat-radio-button 
	:name="color"
  :labelText="Purple"
  :checked="true"
  @cc-radio-button-changed="changeHandler($event)" /><br><br>
  <cometchat-radio-button 
	:name="color"
  :labelText="Brown"
  :checked="true"
  @cc-radio-button-changed="changeHandler($event)" /><br><br>
  <cometchat-radio-button 
	:name="color"
  :labelText="White"
  :checked="true"
  @cc-radio-button-changed="changeHandler($event)" /><br><br>
</fieldset>