`<textInput/>`

An interactive text input

<textInput/> is an Input component that renders a form input field for text responses from the user.

Attributes and Properties

Attributes for `<textInput>`

Labels (1)

labelIsName

boolean. Default value: false. Whether to use this component's name as its rendered label.

Positioning (2)

anchor

point. Default value: $\left( 0, 0 \right)$. Coordinates of the anchor point used to position this component on a graph.

positionFromAnchor

keyword. Where this component sits relative to its anchor point.

Value	Description
`upperRight`	Place the component above and to the right of the anchor point.
`upperLeft`	Place the component above and to the left of the anchor point.
`lowerRight`	Place the component below and to the right of the anchor point.
`lowerLeft`	Place the component below and to the left of the anchor point.
`top`	Place the component directly above the anchor point.
`bottom`	Place the component directly below the anchor point.
`left`	Place the component directly to the left of the anchor point.
`right`	Place the component directly to the right of the anchor point.
`center` (default)	Center the component on the anchor point.

Other (8)

bindValueTo

text. Two-way binding target for the input's value.

draggable

boolean. Default value: true. Whether the input can be dragged on a graph.

expanded

boolean. Default value: false. Whether the input renders as a multi-line text area.

forAnswer

reference. References to <answer> elements that this input should submit to.

height

componentSize. Default value: {"size":120,"isAbsolute":true}. Display height of the input.

labelPosition

keyword. Position of the label relative to the input.

Value	Description
`left` (default)	Place the label to the left of the input.
`right`	Place the label to the right of the input.

prefill

text. Initial text shown in the input before the user types.

width

componentSize. Display width of the input.

Common to all components (9)

copy

reference. Create an independent copy of another component by reference. Enter a references a $name.

disabled

boolean. Default value: false. Whether this component is disabled and cannot be interacted with.

extend

reference. Extend another component by reference, inheriting its children and attributes. Enter a reference as $name.

fixed

boolean. Default value: false. Whether this component's value is fixed and cannot be modified.

fixLocation

boolean. Default value: false. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

hide

boolean. Default value: false. Whether to hide this component from the rendered output.

isResponse

boolean. Default value: false. Whether this component is treated as a response for the purposes of assessment.

name

text. The name used to reference this component from elsewhere in the document.

styleNumber

integer. Default value: 1. The style number used to select this component's visual styling from the available style definitions.

Properties for `<textInput name="t">`

Labels (2)

$t.label

label. The label rendered with this component.

$t.labelIsName

boolean. Whether to use this component's name as its rendered label.

Positioning (2)

$t.anchor

point. The coordinates where this component is anchored on the graph.

$t.positionFromAnchor

text. Where this component sits relative to its anchor point.

Other (23)

$t.characters

[ text ]. The text value split into characters (graphemes).

$t.disabled

boolean. Whether this component is disabled and cannot be interacted with.

$t.draggable

boolean. Whether the input can be dragged on a graph.

$t.expanded

boolean. Whether the input renders as a multi-line text area.

$t.fixed

boolean. Whether this component's value is fixed and cannot be modified.

$t.fixLocation

boolean. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

$t.focused

boolean. Whether this input currently has keyboard focus.

$t.height

componentSize. Display height of the input.

$t.hidden

boolean. Whether this component is hidden from the rendered output.

$t.immediateValue

text. The current text being entered (live, before saving).

$t.immediateValueChanged

boolean. Whether the live text differs from its initial state.

$t.labelPosition

text. Position of the label relative to the input.

$t.list

[ text ]. The text value split into items at commas.

$t.numCharacters

integer. The number of characters (graphemes) in the text value.

$t.numListItems

integer. The number of comma-separated items when the text is interpreted as a list.

$t.numWords

integer. The number of words in the text value.

$t.prefill

text. Initial text shown in the input before the user types.

$t.shortDescription

text. A short accessibility description of this input; it is visible to screen readers but not rendered visually.

$t.text

text. The current text as a plain text string.

$t.value

text. The most recently saved text value.

$t.valueChanged

boolean. Whether the saved text has been changed from its initial state.

$t.width

componentSize. Display width of the input.

$t.words

[ text ]. The text value split into words.

Common to all components (4)

$t.doenetML

text. The DoenetML source code that produced this component.

$t.hide

boolean. Whether to hide this component from the rendered output.

$t.isResponse

boolean. Whether this component is treated as a response for the purposes of assessment.

$t.styleNumber

integer. The style number used to select this component's visual styling from the available style definitions.

Examples

Example: Default `<textInput/>`

The default <textInput/> blank is wide enough for approximately 2-4 words to be visible at a time.

Example: Large `<textInput/>`

The expanded <textInput/> blank is approximately large enough for 4-6 sentences to be visible at a time.

Example: `<textInput/>` with `<label>` child

The <textInput/> component can take a nested <label> child.

Example: `<textInput/>` for graded free-response

The <textInput/> can be nested in an <answer> with the handGraded attribute for graded free-response style questions.

Example: `<textInput/>` for graded closed-form text response

The <textInput/> can be nested in an <answer> that checks the entered text against an expected value, automatically grading a closed-form text response.

Example: `<textInput/>` on a `<graph>`

A <textInput/> can be placed on a <graph>. Use the anchor attribute to adjust its starting location. Click on the border of the <textInput/> to drag it around.

Attribute Examples

Attribute Example: prefill

The prefill attribute specifies initial text for the <textInput/>.

Attribute Example: expanded

The expanded attribute renders a larger <textInput/> space. The dimensions of the input space can be further customized with the height and width attributes.

Attribute Example: forAnswer

Specifying the attribute forAnswer of a <textInput> does two things:

It colors the border of the text input based on the correctness of the response (assuming colorCorrectness is not set to false).
It includes the value of the text input as a response of the answer.

Attribute Example: width

The default width of the input space can be customized with the width attribute.

Attribute Example: height

The default height of the input space can be customized with the height attribute. This must be used in combination with the expanded attribute.

Attribute Example: labelIsName

The labelIsName attribute can be used to assign an automatic label to a <textInput/>.

Attribute Example: draggable

The draggable attribute can be set to false to prevent users from moving the <textInput/> on a <graph>.

Property Examples

Property Example: value

The value property contains the finalized value the user entered into the input. It is updated when the user presses enter or navigates away.

Property Example: immediateValue

The immediateValue property contains the value the user enters into the input as they are typing.

Property Example: attributes as properties

The attributes illustrated in the example are also accessible as properties. The value stored in a <label> child can also be rendered using the label property.

text textList

<textInput/>