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:
- The text itself
- A placeholder (via
placeholderProps
) - A wrapping frame (via
inputFrameProps
)
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
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)