<booleanInput>

<booleanInput> is an Input component that renders a checkbox. If the box is checked by the user, Doenet stores the boolean value true in the named <booleanInput>.

Attributes and Properties

Example: <booleanInput> survey question

<p>Click the box if you like chocolate: 
  <booleanInput name="likesChocolate"/>
</p>
 
<p>The user likes chocolate: <alert>$likesChocolate</alert></p>

A <booleanInput> component renders a checkbox whose value is stored as true if the box is checked.

Example: <booleanInput> to show/hide graph elements

<graph grid="$showGrid" name="g">
  <circle radius="5" center="(1,2)" hide="$hideCircle"/>
 
  <booleanInput name="showGrid" anchor="(-7,7)">
    <label>Show grid</label>
  </booleanInput>
 
  <booleanInput name="hideCircle" anchor="(-7,5)">
    <label>Hide circle</label>
  </booleanInput>
</graph>

The <booleanInput> component can be used to provide user-control over the values of attributes that accept a boolean, such as the <graph> attribute grid, and the general attribute hide available to all rendered components.

Example: <booleanInput> with a label

<booleanInput name="answeredYes">
  <label>Check for yes</label>
</booleanInput>
 
<p>The user answered yes: <alert>$answeredYes</alert></p>

A <label> child can be nested within a <booleanInput> to create a label.

Attribute Example: prefill

<p><booleanInput/></p>
<p><booleanInput prefill="true"/></p>

The <booleanInput> component is false initially by default. Use the prefill attribute set to true to reverse this behavior.

Attribute Example: asToggleButton

The asToggleButton attribute changes the default rendering format from a checkbox to a toggle button.

Attribute Example: labelIsName

<booleanInput name="CheckMe" labelIsName/>

The labelIsName attribute can be used as a shortcut to adding a <label> child.

Attribute Example: bindValueTo

A <booleanInput> is used to simulate a light switch using the bindValueTo attribute. The behavior of the <booleanInput> checkbox is tied to the <boolean>that is named onBoolean within the bindValueTo specification. When the user’s <textInput/> has value ON, the condition inside the <boolean> becomes true, which in turn causes the <booleanInput> to take on the value true, and the checkbox, or “lightbulb” becomes checked.

Property Example: value

<booleanInput name="bi"/>
<p><c>value</c> = $bi.value</p>

The value property of a named <booleanInput> returns its value of true or false.

Property Example: text

<booleanInput name="bi"/>
<p><c>text</c> = $bi.text</p>

The text property of a named <booleanInput> returns the text value of true or false.

Property Example: Attributes as properties

The above listed attributes of a <booleanInput> are also available as properties.