Text Editing

<Input /> component

To allow users to exit text directly in your widget, use the Input component.

The Input component provides an onTextEditEnd callback that fires when the user blurs the Input component.

⚠️ onTextEditEnd does not fire on every key stroke.

The Input component also allows you to specify and style:

• The text itself
• A placeholder (via placeholderProps)
• A wrapping frame (via inputFrameProps)

Usage Example

Typically, you will use a synced variable (eg. useSyncedState or useSyncedMap) to store text displayed by the Input component which is specified via its value prop. In the onTextEditEnd callback, you can then update the synced variable accordingly.

Here is an example widget that uses the Input component.

const { widget } = figma
const { useSyncedState, AutoLayout, Input } = widget

function InputWidget() {
  const [text, setText] = useSyncedState("text", "")

  return (
    <Input
      value={text}
      placeholder="Type name"
      onTextEditEnd={(e) => {
        setText(e.characters);
      }}
      fontSize={64}
      fill="#7f1d1d"
      width={500}
      inputFrameProps={{
        fill: "#fee2e2",
        stroke: "#b91c1c",
        cornerRadius: 16,
        padding: 20,
      }}
      inputBehavior="wrap"
    />
  )
}

widget.register(InputWidget)