Stay organized with collections
Save and categorize content based on your preferences.
A text input field stores a string as its value and a string as its text. Its
value is always a valid string, while its text could be any string entered into
its editor.
The text input constructor takes in an optional value and an optional
validator. The value should cast to a
string. If it is null or undefined, an empty string will be used.
The JSON definition also allows you to set the spellcheck option.
Serialization and XML
JSON
The JSON for a text input field looks like so:
{"fields":{"FIELDNAME":"text"}}
Where FIELDNAME is a string referencing a text input field, and
the value is the value to apply to the field. The value
follows the same rules as the constructor value.
XML
The XML for a text input field looks like so:
<fieldname="FIELDNAME">text</field>
Where the field's name attribute contains a string referencing a text input
field, and the inner text is the value to apply to the field. The inner
text value follows the same rules as the constructor value.
Customization
Spellcheck
The
setSpellcheck
function can be used to set whether the field spellchecks its input text or not.
Text input fields with and without spellcheck
Spellchecking is on by default.
This applies to individual fields. If you want to modify all fields change the
Blockly.FieldTextInput.prototype.spellcheck_ property.
Creating a text input validator
A text input field's value is a string, so any validators must accept a string
and return a string, null, or undefined.
Here is an example of a validator that removes all a characters from the
string:
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-16 UTC."],[[["\u003cp\u003eA text input field stores a string value and allows user text input, with the value always being a valid string.\u003c/p\u003e\n"],["\u003cp\u003eYou can create text input fields using JSON or JavaScript, customizing them with options like spellcheck and validators.\u003c/p\u003e\n"],["\u003cp\u003eText input fields can be serialized and deserialized using JSON or XML, representing the field name and value.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003esetSpellcheck\u003c/code\u003e function allows control over individual field spellchecking, while \u003ccode\u003eBlockly.FieldTextInput.prototype.spellcheck_\u003c/code\u003e affects all fields.\u003c/p\u003e\n"],["\u003cp\u003eValidators for text input fields accept a string and return a modified string, null, or undefined to enforce specific input rules.\u003c/p\u003e\n"]]],["Text input fields store a string as both their value and text, with the value always being a valid string. Creation involves defining the field in JSON or JavaScript, specifying a default text and optional spellcheck. The constructor and JSON allow setting a value, defaulting to an empty string if `null` or `undefined`. Serialization uses JSON and XML, where field names and values are stored. Spellcheck can be toggled, and validators are functions that accept and return strings, `null`, or `undefined`.\n"],null,[]]