Jump to content

Template:Calculator codex checkbox/doc

From Wikipedia, the free encyclopedia

Usage

[edit]

This is to create a codex-style checkbox {{calculator}} widget.

Please see https://doc.wikimedia.org/codex/latest/components/demos/checkbox.html#guidelines for best practices.

Example

[edit]
{{Calculator codex checkbox|id=mycheck|name=group1|label=First option|description=Additional text describing the first option}}

produces:

First optionAdditional text describing the first option

If you have multiple checkboxes that should be grouped together, you should put them all in a <div> with role="group". This helps with accessibility. The group should have its own label referenced by aria-labelledby. For example:

<div role="group" aria-labelledby="mygrouplabel" id="mycheckboxgroup">
{{calculator label|codex=1|label=This is a group of checkboxes|id=mygrouplabel}}
{{Calculator codex checkbox|id=mycheck1|label=First option|description=Additional text describing the first option}}
{{Calculator codex checkbox|id=mycheck2|label=Second option|description=Additional text describing the first option}}
{{Calculator codex checkbox|id=mycheck3|label=Thid option}}
</div>
This is a group of checkboxes
First optionAdditional text describing the first option
Second optionAdditional text describing the first option
Thid option

You can also have options inline:

<div role="group" aria-labelledby="mygrouplabel2" id="mycheckgroup2">
{{calculator label|codex=1|label=A bunch of inline options|id=mygrouplabel2}}
{{Calculator codex checkbox|id=mycheckin3|label=First|inline=1}}
{{Calculator codex checkbox|id=mycheckin2|label=Second|inline=1}}
{{Calculator codex checkbox|id=mycheckin1|label=Third|inline=1}}
</div>
A bunch of inline options
First
Second
Third

Template data

[edit]

Add a checkbox button for calculator gadget in codex style

Template parameters

ParameterDescriptionTypeStatus
codex-div-classcodex-div-class

additional css classes for outer wrapper

Stringoptional
idid

id value of calculator widget. Can be referenced by other calculator templates

Unknownrequired
stylestyle

CSS to style the checkbox button widget

Stringoptional
formulaformula

Formula to control if button is on or off.

Unknownoptional
readonlyreadonly

Make button read only. Read only buttons can be adjusted by formula but not by user interaction

Booleanoptional
class-liveclass-live

extra css classes to add only if gadget is enabled

Unknownoptional
classclass

extra css class

Stringoptional
defaultdefault

Whether to start in a checked or unchecked state

Suggested values
1 0
Stringoptional
descriptiondescription

Additional description to add after the label

Contentoptional
labellabel

Label for checkbox button

Unknownrequired
inlineinline

Make checkbox buttons be inline (Multiple on one line) instead of being a separate line for each

Booleanoptional
custominputcustominput

Add another calculator widget as part of the label for a checkbox button

Example
{{calculator codex text|default=42|id=foo}}
Contentoptional