Class HandlebarsHelpers

For checkboxes, if the value of the checkbox is true, add the "checked" property, otherwise add nothing.

Example

<label>My Checkbox</label>
<input type="checkbox" name="myCheckbox" {{checked myCheckbox}}>
Copy

For use in form inputs. If the supplied value is truthy, add the "disabled" property, otherwise add nothing.

Example

<button type="submit" {{disabled myValue}}>Submit</button>
Copy

Concatenate a number of string terms into a single string. This is useful for passing arguments with variable names.

Example: Concatenate several string parts to create a dynamic variable

{{filePicker target=(concat "faces." i ".img") type="image"}}
Copy

Construct an editor element for rich text editing with TinyMCE or ProseMirror.

Example

{{editor world.description target="description" button=false engine="prosemirror" collaborate=false}}
Copy

A ternary expression that allows inserting A or B depending on the value of C.

Example: Ternary if-then template usage

{{ifThen true "It is true" "It is false"}}
Copy

Translate a provided string key by using the loaded dictionary of localization strings.

Example: Translate a provided localization string, optionally including formatting parameters

<label>{{localize "ACTOR.Create"}}</label> <!-- "Create Actor" -->
<label>{{localize "CHAT.InvalidCommand" command=foo}}</label> <!-- "foo is not a valid chat message command." -->
Copy

A string formatting helper to display a number with a certain fixed number of decimals and an explicit sign.

Example

{{formatNumber 5.5}} <!-- 5.5 -->
{{formatNumber 5.5 decimals=2}} <!-- 5.50 -->
{{formatNumber 5.5 decimals=2 sign=true}} <!-- +5.50 -->
{{formatNumber null decimals=2 sign=false}} <!-- NaN -->
{{formatNumber undefined decimals=0 sign=true}} <!-- NaN -->
Copy

Render a form input field of type number with value appropriately rounded to step size.

Example

{{numberInput value name="numberField" step=1 min=0 max=10}}
Copy

A helper to create a set of radio checkbox input elements in a named set. The provided keys are the possible radio values while the provided values are human readable labels.

Example: The provided input data

let groupName = "importantChoice";
let choices = {a: "Choice A", b: "Choice B"};
let chosen = "a";
Copy

Example: The template HTML structure

<div class="form-group">
  <label>Radio Group Label</label>
  <div class="form-fields">
    {{radioBoxes groupName choices checked=chosen localize=true}}
  </div>
</div>
Copy

Render a pair of inputs for selecting a value in a range.

Example

{{rangePicker name="foo" value=bar min=0 max=10 step=1}}
Copy

A helper to create a set of <option> elements in a <select> block based on a provided dictionary. The provided keys are the option values while the provided values are human-readable labels. This helper supports both single-select and multi-select input fields.

Example: The provided input data

let choices = {a: "Choice A", b: "Choice B"};
let value = "a";
Copy

The template HTML structure

<select name="importantChoice">
  {{selectOptions choices selected=value localize=true}}
</select>
Copy

The resulting HTML

<select name="importantChoice">
  <option value="a" selected>Choice A</option>
  <option value="b">Choice B</option>
</select>
Copy

Example: Using inverted choices

let choices = {"Choice A": "a", "Choice B": "b"};
let value = "a";
Copy

The template HTML structure

<select name="importantChoice">
 {{selectOptions choices selected=value inverted=true}}
</select>
Copy

Example: Using nameAttr and labelAttr with objects

let choices = {foo: {key: "a", label: "Choice A"}, bar: {key: "b", label: "Choice B"}};
let value = "b";
Copy

The template HTML structure

<select name="importantChoice">
  {{selectOptions choices selected=value nameAttr="key" labelAttr="label"}}
</select>
Copy

Example: Using nameAttr and labelAttr with arrays

let choices = [{key: "a", label: "Choice A"}, {key: "b", label: "Choice B"}];
let value = "b";
Copy

The template HTML structure

<select name="importantChoice">
  {{selectOptions choices selected=value nameAttr="key" labelAttr="label"}}
</select>
Copy

Convert a DataField instance into an HTML input fragment.

Convert a DataField instance into an HTML input fragment.