Select

API reference for the "Select" control.

Renders a dropdown within the Canva UI.
To learn how controls work, refer to Rich controls.
Usage
canva.create('select', {
  id: 'selectExample',
  value: 'apples',
  options: [
    { 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 select, the value must be "select".
opts
object
Yes
Properties for configuring the control.
opts.id
string
Yes
A unique ID for the control.
opts.options
​Array<Option>​
Yes
The options to render within the select control.
opts.value
string
No
The value of the selected option. This value must match thevalue property of one of the options.
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 "select".
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 option.
Types
Option
Represents an individual option in a dropdown.
Properties
Name
Type
Required
Description
value
string
Yes
The value of the option.
label
string
Yes
A human readable label for the option.
Example
const canva = window.canva.init();
​
const state = {
  selectExample: 'apples',
};
​
canva.onReady(() => {
  renderControls();
});
​
canva.onControlsEvent(async (opts) => {
  if (!opts.message.commit) {
    return;
  }
​
  if (opts.message.controlType === 'select') {
    state[opts.message.controlId] = opts.message.message.value;
  }
​
  renderControls();
});
​
function renderControls() {
  const controls = [
    canva.create('select', {
      id: 'selectExample',
      value: state.selectExample,
      options: [
        { value: 'apples', label: 'Apples' },
        { value: 'bananas', label: 'Bananas' },
        { value: 'pears', label: 'Pears' },
      ],
    }),
  ];
​
  canva.updateControlPanel(controls);
}

RadioGroup

Slider

Last updated 3 months ago

Name	Type	Required	Description
`controlType`	string	Yes	The type of control. To create a select, the value must be `"select"`.
`opts`	object	Yes	Properties for configuring the control.
`opts.id`	string	Yes	A unique ID for the control.
`opts.options`	`Array<Option>`	Yes	The options to render within the select control.
`opts.value`	string	No	The value of the selected option. This value must match the`value` property of one of the options.