TextInput

API reference for the "TextInput" control.

Renders an input field within the Canva UI.
To learn how controls work, refer to Rich controls.
For guidelines on making the most of rich controls, see Use rich controls (with some restraint).
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,
    }),
  ];
​
  canva.updateControlPanel(controls);
}

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.

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.

Slider

ThumbnailList

Last modified 5mo ago