TextInput

API reference for the "TextInput" control.

Renders an input field within the Canva UI.

To learn how controls work, refer to Rich controls.

Usage

canva.create('text_input', {
inputType: 'text',
id: 'textInputExample',
placeholder: 'Enter some text...',
label: 'Text Input Example',
name: 'textInputExample',
disabled: false,
value: 'Hello world',
maxLength: 50,
});

Parameters

Name

Type

Required

Description

controlType

string

Yes

The type of control. To create a text input, the value must be "text_input".

opts

object

Yes

Properties for configuring the control.

opts.id

string

Yes

A unique ID for the control.

opts.inputType

string

Yes

The type of input. The possible values are "text" and "number".

opts.disabled

boolean

No

If true, the text input is disabled. The default value is false.

opts.label

string

No

A human readable label for the control.

opts.maxLength

number

No

The maximum number of characters allowed in the input. This property is only valid when the inputType is "text".

opts.name

string

No

opts.placeholder

string

No

A human readable prompt that's displayed when the value property is empty.

opts.value

string

No

The value of the text input.

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 "text_input".

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 "change".

opts.message.message.value

string | number

Yes

The value of the input.

Example

const canva = window.canva.init();
const state = {
textInputExample: 'Hello world',
numberInputExample: 42,
};
canva.onReady(() => {
renderControls();
});
canva.onControlsEvent(async (opts) => {
if (!opts.message.commit) {
return;
}
if (opts.message.controlType === 'text_input') {
state[opts.message.controlId] = opts.message.message.value;
}
renderControls();
});
function renderControls() {
const controls = [
canva.create('text_input', {
inputType: 'text',
id: 'textInputExample',
placeholder: 'Enter some text...',
label: 'Text Input Example',
disabled: false,
value: state.textInputExample,
maxLength: 50,
}),
canva.create('text_input', {
inputType: 'number',
id: 'numberInputExample',
placeholder: 'Enter a number...',
label: 'Number Input Example',
disabled: false,
value: state.numberInputExample,
min: 0,
max: 100,
}),
];
canva.updateControlPanel(controls);
}