Radio Button

Overview

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

Properties

Name	Type	Description
name	string	Name of the element
labelText	string	Caption text of the element
checked	boolean	When set to true, element is checked by default
disabled	boolean	When set to true, disables the element
radioButtonStyle	RadioButtonStyle	Styling properties and values of the element

RadioButtonStyle

Styling properties and values of the element

Name	Description
width	Sets the width of the element
height	Sets the height of the element
border	Sets the border of the element
borderRadius	Sets the border radius of the element
background	Sets all background style properties at once, such as color, image, origin and size, or repeat method. Reference link
labelTextFont	Sets all the different properties of font for the caption text. Reference link
labelTextColor	Sets the foreground color of caption text.

Events

Events triggered by the element

Name	Description
cc-radio-button-changed	Triggered when user updates or modifies the element

Usage

Javascript

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>