Template:Calculator label/doc

Usage

Add a label for a field from {{calculator}}. This associates the label with the element which is better for accessibility. It also means if you click on the label, it selects the field in question.

This template depends on mediawiki:Gadget-calculator.js

Generally you just set the for parameter to the id of your calculator widget.

e.g.

{{calculator|type=checkbox|id=mycheck}} {{calculator label|Label for checkbox|for=mycheck}}

Label for checkbox

Codex mode

If the codex parameter is set, then this label will be displayed in codex mode. In this mode you can also use the optional description and flag parameters.

See https://doc.wikimedia.org/codex/latest/components/demos/label.html#guidelines for guidelines on how best to use codex labels.

As an example:

{{Calculator label|codex=true|description=Short description text|label=Label text|flag=(optional)|for=foo}}
<div class="cdx-text-input">{{calculator|type=text|class=cdx-text-input__input|default=42|id=foo}}</div>

Produces:

Label text (optional)Short description text

42

TemplateData

This is the TemplateData for this template used by TemplateWizard, VisualEditor and other tools. See a monthly parameter usage report for Template:Calculator label in articles based on its TemplateData.

TemplateData for Calculator label

Way to add a label to a form control from Template:Calculator. Adding labels using this template helps ensure calculators are accessible

Template parameters

Parameter		Description	Type	Status
1	1 label	Text for label	Content	required
for	for	The id from the calculator template this label is for	String	required
class	class	CSS class or classes to add to label	String	optional
class-live	class-live	CSS classes applied only when the gadget is enabled	String	optional
codex	codex	Make this a codex style label	Boolean	optional
codex-class	codex-class	Extra class on the codex wrapper Example cdx-radio__label	String	optional
description	description	[codex mode only] Additional description text about the widget that is not part of the label	Content	optional
description-id	description-id	[codex mode only] id for the description element	String	optional
flag	flag	[Codex mode only] Additional information about the widget. Usually to mark a field as optional Example (optional)	Content	optional
style	style	CSS for label	String	optional
title	title	Tooltip to show on hover	String	optional