<textInput/>

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

Attributes and Properties

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 spans the width available to it and is approximately tall 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

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

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

Attribute Example: expanded

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

The expanded attribute renders a larger <textInput/> space. An expanded input fills the width available to it, and is 120 pixels tall. Both dimensions can be customized with the width and height 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>
  <textInput width="600px">
    <label>A wider input</label>
  </textInput>
</p>
<p>
  <textInput width="10px">
    <label>A narrower input</label>
  </textInput>
</p>

The default width of the input space can be customized with the width attribute. A bare number is a number of pixels, and physical units such as 6in or 15cm are read as well — see Sizes for the full list of forms a size may take.

Attribute Example: width as a percentage

<p>
  <textInput expanded width="50%">
    <label>Half the width of the column</label>
  </textInput>
</p>

An expanded <textInput/> may be given its width as a percentage of the width available to it, so that it stays in proportion when the reader’s window is narrow. That is also its default: an expanded input with no width of its own is 100% wide. An expanded input never grows wider than the column it sits in, even when it asks for more.

A word-sized (not expanded) input is the exception: it keeps whatever width it is given — 100 pixels by default — and the line it sits in closes around it, so a percentage there would be a share of a box whose own width depends on the input. Give a word-sized input an absolute width.

Attribute Example: height

<p>
  <textInput height="600px" expanded>
    <label>A taller input</label>
  </textInput>
</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. A bare number is a number of pixels, and physical units such as 6in or 15cm are read as well. See Sizes.

Attribute Example: labelIsName

<p>Enter the shape that is shown.</p>
 
<graph size="small" displayXAxis="false" displayYAxis="false"> 
  <shortDescription>A triangle with a text input labeled "shape" for entering its name.</shortDescription>
  <textInput name="shape" labelIsName>
    <shortDescription>input for the name of the shape shown</shortDescription>
  </textInput>
  <regularPolygon numSides="3" sideLength="18" filled center="(-2,0)"/>
</graph>
 
<textInput name="Hi" labelIsName>
  <shortDescription>text input demonstrating labelIsName</shortDescription>
</textInput>

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"> 
  <shortDescription>A circle with two text inputs, one fixed and one draggable.</shortDescription>
  <textInput 
    draggable="false" 
    prefill="cannot drag" 
    anchor="(-3,-5)"
  >
    <shortDescription>fixed text box</shortDescription>
  </textInput>
  <textInput prefill="drag me" anchor="(3,5)">
    <shortDescription>draggable text box</shortDescription>
  </textInput>
  <circle radius="8" filled/>
</graph>

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.