RadioGroup
API reference for the "RadioGroup" control.
Renders a group of radio buttons within the Canva UI.
To learn how controls work, refer to Rich controls.

Usage

1
canva.create("radio_group", {
2
id: "radioGroupExample",
3
value: "apples",
4
buttons: [
5
{
6
value: "apples",
7
label: "Apples",
8
},
9
{
10
value: "bananas",
11
label: "Bananas",
12
},
13
{
14
value: "pears",
15
label: "Pears",
16
},
17
],
18
});
Copied!

Parameters

Name
Type
Required
Description
controlType
string
Yes
The type of control. To create a radio group, the value must be "radio_group".
opts
object
Yes
Properties for configuring the control.
opts.id
string
Yes
A unique ID for the control.
opts.buttons
Yes
The radio buttons to render in the radio group.
opts.value
string
The value of the selected radio button. This value must match a value property for one of the buttons.

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 "radio_group".
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 "setValue".
opts.message.message.value
string
Yes
The value of the selected radio button.

Types

Button

Represents an individual radio button.
Properties
Name
Type
Required
Description
value
string
Yes
The value of the radio button.
label
string
Yes
A human readable label for the radio button.
disabled
boolean
No
If true, the radio button is disabled.

Example

1
const canva = window.canva.init();
2
3
const state = {
4
radioGroupExample: "apples",
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 === "radio_group") {
17
state[opts.message.controlId] = opts.message.message.value;
18
}
19
20
renderControls();
21
});
22
23
function renderControls() {
24
const controls = [
25
canva.create("radio_group", {
26
id: "radioGroupExample",
27
value: state.radioGroupExample,
28
buttons: [
29
{
30
value: "apples",
31
label: "Apples",
32
},
33
{
34
value: "bananas",
35
label: "Bananas",
36
},
37
{
38
value: "pears",
39
label: "Pears",
40
},
41
],
42
}),
43
];
44
45
canva.updateControlPanel(controls);
46
}
Copied!
Last modified 3d ago