Root: Created page with "{{documentation header}} This template is borrowed from Wikipedia Template:Calculator label. == Usage == Add a label for a field from {{tl|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 ===..."

2025-10-04T19:03:57Z

Created page with "{{documentation header}}  This template is borrowed from Wikipedia Template:Calculator label. == Usage == Add a label for a field from {{tl|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 <code>for</code> parameter to the id of your calculator widget. === Example ===..."

New page

{{documentation header}}

This template is borrowed from Wikipedia [[w:Template:Calculator label|Template:Calculator label]].

== Usage ==
Add a label for a field from {{tl|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 <code>for</code> parameter to the id of your calculator widget.

=== Example ===
<pre>
{{simplecalc|type=checkbox|id=mycheck}} {{simplecalc label|Label for checkbox|for=mycheck}}
</pre>

Produces:
<div style="border: thin dashed grey;padding:1em">
{{simplecalc|type=checkbox|id=mycheck}} {{simplecalc label|Label for checkbox|for=mycheck}}
</div>

=== 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:
<pre>
{{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>
</pre>

Produces:
<div style="border: thin dashed grey;padding:1em">
{{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>
</div>

==TemplateData==
<templatedata>
{
"params": {
"1": {
"aliases": [
"label"
],
"description": "Text for label",
"type": "content",
"required": true
},
"for": {
"description": "The id from the simplecalc template this label is for",
"type": "string",
"required": true
},
"class": {
"description": "CSS class or classes to add to label",
"type": "string"
},
"class-live": {
"description": "CSS classes applied only when the gadget is enabled",
"type": "string"
},
"codex": {
"description": "Make this a codex style label",
"type": "boolean"
},
"codex-class": {
"description": "Extra class on the codex wrapper",
"example": "cdx-radio__label",
"type": "string"
},
"description": {
"description": "[codex mode only] Additional description text about the widget that is not part of the label",
"type": "content"
},
"description-id": {
"description": "[codex mode only] id for the description element",
"type": "string"
},
"flag": {
"description": "[Codex mode only] Additional information about the widget. Usually to mark a field as optional",
"example": "(optional)",
"type": "content"
},
"style": {
"description": "CSS for label",
"type": "string"
},
"title": {
"description": "Tooltip to show on hover",
"type": "string"
}
},
"description": "Way to add a label to a form control from Template:Simplecalc. Adding labels using this template helps ensure calculators are accessible"
}
</templatedata>

<includeonly>{{sandbox other||

[[Category:Simple calculator templates]]

}}</includeonly>
<noinclude>


</noinclude>

Template:Simplecalc label/doc - Revision history