Checkbox
Overview
This element allow the user to select one or more items 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 |
checkboxStyle | CheckboxStyle | Styling properties and values of the element |
CheckboxStyle
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. |
checkedBackgroundColor | Sets the background color when the element is in checked state |
uncheckedBackgroundColor | Sets the background color when the element is in unchecked state |
Events
Events triggered by the element
Name | Description |
---|---|
cc-checkbox-changed | Triggered when user updates or modifies the element |
Usage
- Javascript
import '@cometchat/uikit-elements';//import the web component package.
const changeHandler = event => {
console.log(event.detail.checked);
}
<cometchat-checkbox
:labelText="Checkbox 1"
:checked="true"
@cc-checkbox-changed="changeHandler($event)" />