Template:Calculator codex checkbox/doc

Usage

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

{{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|for=mycheckboxgroup|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|for=mycheckgroup2|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

Add a checkbox button for calculator gadget in codex style

Template parameters

Parameter		Description	Type	Status
codex-div-class	codex-div-class	additional css classes for outer wrapper	String	optional
id	id	id value of calculator widget. Can be referenced by other calculator templates	Unknown	required
style	style	CSS to style the checkbox button widget	String	optional
formula	formula	Formula to control if button is on or off.	Unknown	optional
readonly	readonly	Make button read only. Read only buttons can be adjusted by formula but not by user interaction	Boolean	optional
class-live	class-live	extra css classes to add only if gadget is enabled	Unknown	optional
class	class	extra css class	String	optional
default	default	Whether to start in a checked or unchecked state Suggested values 1 0	String	optional
description	description	Additional description to add after the label	Content	optional
label	label	Label for checkbox button	Unknown	required
inline	inline	Make checkbox buttons be inline (Multiple on one line) instead of being a separate line for each	Boolean	optional
custominput	custominput	Add another calculator widget as part of the label for a checkbox button Example {{calculator codex text|default=42|id=foo}}	Content	optional