Template:Simplecalc label

{{{label}}}

This template is borrowed from Wikipedia Template:Calculator label.

Usage

Add a label for a field from {{simplecalc}}. 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.

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

Example

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

Produces:

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:

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

Produces:

Label text (optional)Short description text

42

TemplateData

Way to add a label to a form control from Template:Simplecalc. 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 simplecalc 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