Group
API reference for the "Group" control.
Renders controls within a labelled group.
To learn how controls work, refer to Rich controls.

Usage

1
canva.create("group", {
2
id: "groupExample",
3
label: "Group Example",
4
children: [
5
// controls go here
6
],
7
});
Copied!

Parameters

Name
Type
Required
Description
controlType
string
Yes
The type of control. To create a group, the value must be "group".
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.children
array
Yes
The controls to display in the group. Canva renders these controls in the order they appear in the array. The controls do not need to be of the same type.

Example

1
const canva = window.canva.init();
2
3
canva.onReady(() => {
4
renderControls();
5
});
6
7
function renderControls() {
8
const controls = [
9
canva.create("group", {
10
id: "groupExample",
11
label: "Group Example",
12
children: [
13
canva.create("button", {
14
id: "button1",
15
label: "Button #1",
16
}),
17
canva.create("button", {
18
id: "button2",
19
label: "Button #2",
20
}),
21
canva.create("button", {
22
id: "button3",
23
label: "Button #3",
24
}),
25
],
26
}),
27
];
28
29
canva.updateControlPanel(controls);
30
}
Copied!
Last modified 3d ago
Copy link