{{{label}}}
Usage
[edit]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
[edit]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:
TemplateData
[edit]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
| 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
| 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
| Content | optional |
| style | style | CSS for label | String | optional |
| title | title | Tooltip to show on hover | String | optional |