Skip to main content

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.

caution

⚠️ onTextEditEnd does not fire on every key stroke.

The Input component also allows you to specify and style:

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.

Example input component

Example
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)