Group

API reference for the "Group" control.

Renders controls within a labelled group.

To learn how controls work, refer to Rich controls.

Usage

canva.create('group', {
id: 'groupExample',
label: 'Group Example',
children: [
// controls go here
],
});

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

const canva = window.canva.init();
canva.onReady(() => {
renderControls();
});
function renderControls() {
const controls = [
canva.create('group', {
id: 'groupExample',
label: 'Group Example',
children: [
canva.create('button', {
id: 'button1',
label: 'Button #1',
}),
canva.create('button', {
id: 'button2',
label: 'Button #2',
}),
canva.create('button', {
id: 'button3',
label: 'Button #3',
}),
],
}),
];
canva.updateControlPanel(controls);
}