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
- HTML
- JavaScript
<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>
import '@cometchat/uikit-elements';//import the web component package.
import {RadioButtonStyle} from '@cometchat/uikit-elements'
changeHandler = (event: any) => {
console.log(event.detail.url);
}