Checkbox
API reference for the "Checkbox" control.
Renders a checkbox within the Canva UI.
To learn how controls work, refer to Rich controls.

Usage

1
canva.create("checkbox", {
2
id: "checkboxExample",
3
label: "Checkbox Example",
4
disabled: false,
5
checked: false,
6
});
Copied!

Parameters

Name
Type
Required
Description
controlType
string
Yes
The type of control. To create a checkbox, the value must be "checkbox".
opts
object
Yes
Properties for configuring the control.
opts.id
string
Yes
A unique ID for the control.
opts.label
string
Yes
A human readable label for the control.
opts.disabled
boolean
No
If true, the checkbox is disabled. The default value is false.
opts.checked
boolean
No
If true, the checkbox is checked. The default value is false.

Event

Name
Type
Required
Description
opts
object
Yes
Information about the event.
opts.message
object
Yes
Information about the event.
opts.message.commit
boolean
Yes
The value of this property is always true.
opts.message.controlId
string
Yes
The id of the control.
opts.message.controlType
string
Yes
The type of control. The value of this property is always "checkbox".
opts.message.message
object
Yes
Additional information about the event.
opts.message.message.type
string
Yes
The type of event. The value of this property is always "changed".
opts.message.message.checked
boolean
Yes
If true, the user has checked the checkbox. If false, the user has unchecked the checkbox.

Example

1
const canva = window.canva.init();
2
3
const state = {
4
checkboxExample: false,
5
};
6
7
canva.onReady(() => {
8
renderControls();
9
});
10
11
canva.onControlsEvent(async (opts) => {
12
if (!opts.message.commit) {
13
return;
14
}
15
16
if (opts.message.controlType === "checkbox") {
17
state[opts.message.controlId] = opts.message.checked;
18
}
19
20
renderControls();
21
});
22
23
function renderControls() {
24
const controls = [
25
canva.create("checkbox", {
26
id: "checkboxExample",
27
label: state.checkboxExample
28
? "The checkbox is checked"
29
: "The checkbox is not checked",
30
disabled: false,
31
checked: state.checkboxExample,
32
}),
33
];
34
35
canva.updateControlPanel(controls);
36
}
Copied!
Last modified 3d ago