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>