`<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 (5)

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.

maskLabel

boolean. Default value: false. Whether to give the label an opaque background so it stays legible when it overlaps an axis, grid line, or another object.

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 (14)

$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.maskLabel

boolean. Whether to give the label an opaque background so it stays legible when it overlaps an axis, grid line, or another object.

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

Attribute Example: maskLabel

By default, a graph label is drawn with a transparent background, so the axis, a grid line, or another object can show through the text and make it hard to read. Set maskLabel="true" to give the label an opaque background (a “mask”) that keeps it legible instead; the “Masked” label above shows how it then covers the axis behind the text. maskLabel is a standard graphical attribute available on every graphical component that can carry a label (such as <point>, <line>, and <circle>), not just on a stand-alone <label>.

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">