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

canva.create('radio_group', {
id: 'radioGroupExample',
value: 'apples',
buttons: [
{
value: 'apples',
label: 'Apples',
},
{
value: 'bananas',
label: 'Bananas',
},
{
value: 'pears',
label: 'Pears',
},
],
});

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

Array<Button>

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

const canva = window.canva.init();
const state = {
radioGroupExample: 'apples',
};
canva.onReady(() => {
renderControls();
});
canva.onControlsEvent(async (opts) => {
if (!opts.message.commit) {
return;
}
if (opts.message.controlType === 'radio_group') {
state[opts.message.controlId] = opts.message.message.value;
}
renderControls();
});
function renderControls() {
const controls = [
canva.create('radio_group', {
id: 'radioGroupExample',
value: state.radioGroupExample,
buttons: [
{
value: 'apples',
label: 'Apples',
},
{
value: 'bananas',
label: 'Bananas',
},
{
value: 'pears',
label: 'Pears',
},
],
}),
];
canva.updateControlPanel(controls);
}