`<label>`

A label for an input, answer, button, or graphical object

When used with an input or answer (<mathInput>, <textInput>, <booleanInput>, <choiceInput>, <matrixInput>, <answer>) or with a button-triggering component (<updateValue>, <callAction>, <triggerSet>), the <label> is shown on screen and is exposed to assistive technology as the component’s accessible name. Adding a <label> is the preferred way to label an input: a single visible label serves both sighted users and assistive-technology users. (When a label should be available only to assistive technology, use a <shortDescription> instead.)

When used on a <graph>, a <label> renders text or math attached to a graphical object such as a <point>, or as a standalone annotation positioned with the anchor attribute.

A <label> can be written as a child of the component it labels, or placed elsewhere in the document and linked to an input or answer with the for attribute.

Attributes and Properties

Attributes for `<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 (4)

draggable

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

for

reference. Reference to the component this label is for (e.g., an input).

forObject

reference. Reference to the graphical object this label is attached to.

layer

number. Default value: 0. Z-order layer index when shown on a graph.

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 `<label name="l">`

Positioning (2)

$l.anchor

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

$l.positionFromAnchor

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

Other (13)

$l.backgroundColor

text. Human-readable name for this component's background color, derived from the active style and theme.

$l.disabled

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

$l.draggable

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

$l.fixed

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

$l.fixLocation

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

$l.hasLatex

boolean. Whether the label contains LaTeX content.

$l.hidden

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

$l.latex

latex. The label's content as a LaTeX string.

$l.layer

number. Z-order layer index when shown on a graph.

$l.text

text. The label's text content.

$l.textColor

text. Human-readable name for this component's text color, derived from the active style and theme.

$l.textStyleDescription

text. Human-readable description of this component's text styling (color and any background color).

$l.value

label. The label's content as a label-typed value.

Common to all components (4)

$l.doenetML

text. The DoenetML source code that produced this component.

$l.hide

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

$l.isResponse

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

$l.styleNumber

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

Examples

Example: `<label>` a `<point>` on a `<graph>`

Any graphical component (such as a <point>, <line>, or <curve>) will accept a <label> component as a child.

Example: A stand-alone `<label>` on a `<graph>`

A <label> can be placed within a <graph> directly (not as a child of a graphical component). Use the anchor attribute to position the <label>.

Example: `<label>` a checkbox

A checkbox is rendered by the <booleanInput> component. The <booleanInput> component takes a <label> child.

Example: `<label>` an `<updateValue>`

The <updateValue> component, when triggered based on a button click interaction, can take a <label> child.

Example: `<label>` a `<callAction>`

The <callAction> component, when triggered based on a button click interaction, can take a <label> child.

Example: `<label>` a `<triggerSet>`

The <callAction> component, when triggered based on a button click interaction, can take a <label> child.

Example: `<label>` within a `<legend>`

A <legend> can be given <label> children. Labels are assigned to components in the order in which they are defined within the graph.

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

Although a <mathInput/> cannot be placed on a <graph>, a <textInput/> can be placed on a graph to gather basic numerical or algebraic responses. These responses can then be redefined as a <math> for use in an <award>. The <textInput/> on the graph can take a <label> child to prompt the desired input.

Attribute Examples

Attribute Example: for

The for attribute lets a <label> be placed anywhere in the document instead of being nested inside the input it labels, giving you control over where the label appears. Set for to a reference to the input or answer it labels (here, for="$response"). The label is linked to that input for assistive technology in exactly the same way as a <label> child would be. The for attribute is ignored on a <label> placed inside a <graph>.

Attribute Example: forObject

The forObject attribute is used with a <label> nested inside a <legend> to override the default label ordering. The default label ordering within a legend matches the order in which components are defined within the <graph>.

Attribute Example: draggable

The draggable attribute determines whether the <label> can be dragged around the <graph>. All graphical objects are draggable by default.

Property Examples

Property Example: text

The text property returns the text value of the named <label>.

Property Example: latex

The latex property returns the latex code for rendering the named <label>.

Property Example: value

The value property returns the value stored with the named <label>.

isNumber latex

<label>

Attributes and Properties

Attributes for <label>

Properties for <label name="l">