<textInput/>

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

Attributes and Properties

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> with the handGraded attribute for graded free-response style questions.

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 Example: prefill

<p>Enter your favorite vacation place: 
  <textInput prefill="my cabin"/></p>

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

Attribute Example: expanded

<p>Type some longer things: <textInput expanded/></p>

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:

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

Attribute Example: width

<p>A wider input: 
  <textInput width="600px"/></p>
<p>A narrower input: 
  <textInput width="10px"/></p>

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

Attribute Example: height

<p>A taller input: 
  <textInput height="600px" expanded/></p>

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

<p>Enter the shape that is shown.</p>
 
<graph size="small" displayXAxis="false" displayYAxis="false"> 
  <textInput name="shape" labelIsName/>
  <regularPolygon numSides="3" sideLength="18" filled center="(-2,0)"/>
</graph>
 
<textInput name="Hi" labelIsName/>

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

Attribute Example: draggable

<p>Play with moving the boxes around.</p>
 
<graph size="small"> 
  <textInput 
    draggable="false" 
    prefill="cannot drag" 
    anchor="(-3,-5)"
  />
  <textInput prefill="drag me" anchor="(3,5)"/>
  <circle radius="8" filled/>
</graph>

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

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.