<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: 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.